content 内容生成技术1

tinysun1234 发布于2019-08-30 15:53 / 1523人阅读

摘要：最近在看张鑫旭的世界看了这个书感觉打开了世界的大门建议前端工程师人手一本针对字符内容生成这一技术用的最多的应该就是配合实现字体图标了吧因为就运用了这一技术进入之后默认是点击红线里面就是连接了可以直接打开看到源码与上面所写无二在

最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本

针对content 字符内容生成这一技术用的最多的应该就是配合@font-face实现字体图标了吧. 因为http://www.iconfont.cn 就运用了这一技术

@font-face {
  font-family: "iconfont";  /* project id 243181 */
  src: url("//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot");
  src: url("//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix") format("embedded-opentype"),
  url("//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff") format("woff"),
  url("//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf") format("truetype"),
  url("//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont") format("svg");
}
.icon-search:before {
  font-size: 24px; font-family: iconfont; content: "e657"; color: #000;
}

进入iconfont之后默认是Unicode 点击Font class 红线里面就是连接了, 可以直接打开看到源码. 与上面所写无二.

在上面:before中content中的字符是Unicode, 由此延伸出下一个功能动态加载页面内容的时候时常用到"正在加载中..."这几个字, 可以利用这一技术实现动态...

html
正在加载中...

css
dot {
    display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;
}
dot {
    display: block; content: "...a..a."; white-space: pre-wrap; animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em) }
    66% { transform: translateY(-1em) }
}

效果可以查看张鑫旭博客查看, ie6~ie9是静态的, 支持animation动画的浏览器都是动态的.
动画原理为: 插入3行内容是 3个点、2个点和一个点, 然后通过transform控制垂直位置.
这里需要注意的有这么几点

元素

为什么是::before, 而不是:before, 可不可以使用::after

从content属性来看, 是3个点在第一行, 而1个点反而在最后一行, 为什么这么处理

这里white-space值为何是pre-wrap 而不是pre

对这几个答案一一做回答:

是自定义的一个标签元素, 除了简约、语义化明显外, 更重要的是方便向下兼容, ie8等低版本浏览器不认识自定义的HTML标签, 就会显示默认的3个点, 且对css代码忽略.

:before是伪类, ::before则为伪元素. 伪元素使用::before 同时display设置为block, 是为了在现代浏览器下把原来的3个点推到最下面, 不会影响content的3行内容显示, 如果使用::after就很难实现效果

3个点在第一行是为了兼容ie9, 应为ie9认识以及::before, 但是不支持animation, 所以为了ie9才把3个点放在第一行.

pre-wrap换成pre效果一样.

content开启闭合符号生成
CSS中有个quotes属性, 可以指定open-quote和close-quote字符具体是什么. 例如, 针对不同语言指定不同的前后符号:

css世界是一本好书
css世界是一本好书
css世界是一本好书
/* 为不同语言指定引号 */
:lang(ch) > q { quotes: """ """; }
:lang(en) > q { quotes: """ """; }
:lang(no) > q { quotes: "<" ">"; }

/* 在q标签的前后插入引号 */
q:before { content: open-quote; }
q:after { content: close-quote; }

在此基础上演变更多好玩的:

.ask {
    quotes: "提问: "" """;
}
.answer {
    quotes: "回答: "" """;
}
.ask:before,
.answer:before {
    content: open-quote;
}
.ask:after,
.answer:after {
    content: close-quote;
}

你问我爱你有多深?
月亮代表我的心

content attr属性值内容生成
这个功能比较常用, 作者常用, 我也很常用.

img::after {
    /* 生成alt信息 */
    content: attr(alt); 
}

除了原生属性, 自定义的HTML属性也是可以的

.icon:before {
    content: attr(data-title);
}

需要注意的是, attribute中的属性名不要加引号!

idc机房托管超融合服务器 php内容生成图片 cdn内容路由技术 cdn内容分发技术 Contents

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116701.html

content 内容生成技术1

摘要：最近在看张鑫旭的世界看了这个书感觉打开了世界的大门建议前端工程师人手一本针对字符内容生成这一技术用的最多的应该就是配合实现字体图标了吧因为就运用了这一技术进入之后默认是点击红线里面就是连接了可以直接打开看到源码与上面所写无二在最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本针对content 字符内容生成这一技术用的最多的应该就是...

fanux 2019-08-05 13:35 评论0 收藏0
content 内容生成技术2

摘要：计数器效果可是说是的重中之重此功能非常强大实用且不具有可替代性甚至可以实现连都不好实现的效果这个地方放慢节奏细细品味先来个例子体验一下计数器第一个第二个第三个所谓计数器效果指的是使用代码实现随着元素数目增多数值也跟着变大的效果图中红色阿计数器效果可是说是content的重中之重, 此功能非常强大、实用, 且不具有可替代性, 甚至可以实现连js都不好实现的效果. 这个地方放慢节奏, 细...

wow_worktile 2019-08-30 15:53 评论0 收藏0
手把手教你如何用Crawlab构建技术文章聚合平台(二)

摘要：上一篇文章手把手教你如何用构建技术文章聚合平台一介绍了如何使用搭建的运行环境，并且将与集成，对掘金进行技术文章的抓取，最后可以查看抓取结果。本篇文章将继续讲解如何利用编写一个精简的聚合平台，将抓取好的文章内容展示出来。上一篇文章《手把手教你如何用Crawlab构建技术文章聚合平台(一)》介绍了如何使用搭建Crawlab的运行环境，并且将Puppeteer与Crawlab集成，对掘金、...

zhunjiee 2019-07-31 10:11 评论0 收藏0
Repractise架构篇一: CMS的重构与演进

摘要：重构系统是一项非常具有挑战性的事情。架构与说起来，我一直是一个党。如下图是采用的架构这与我们在项目上的系统架构目前相似。而这是大部分所不支持的。允许内容通过内容服务更新使用于是，有了一个名为的框架用于管理内容，并存储为。重构系统是一项非常具有挑战性的事情。通常来说，在我们的系统是第二个系统的时候才需要重构，即这个系统本身已经很臃肿。我们花费了太量的时间在代码间的逻辑，开发新的功能变得...

William_Sang 2019-06-24 17:47 评论0 收藏0
HTTPS 改造初探

摘要：一摘要今年的月开始，我们启动了改造项目，并首先在微店买买和交易下单两个业务上进行试点。身份认证发生在握手阶段，用于验证证书的合法性和时间有效性。此次改造，引入了作为前后端的统一接入层。全站改造的落地。一、摘要今年的3月开始，我们启动了 HTTPS 改造项目，并首先在微店买买和交易下单两个业务上进行试点。这次试点，一是为全站 HTTPS 改造进行全面的技术摸底，同时也是要沉淀出通用的...

Lavender 2019-08-02 18:52 评论0 收藏0