content内容生成技术1

最近在看张新旭的《css世界》。看完这本书，感觉自己打开了css世界的大门。生成内容人物的技术推荐前端工程师有一份。正确的。因为http://www.iconfont.cn使用了这种技术@font-face{font-family:'iconfont';/*项目ID243181*/src:url('//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot');src:url('//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix')格式('embedded-opentype'),url('//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff')格式（'woff'），url（'//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf'）格式（'truetype'），url（'//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont')format('svg');}.icon-search:before{font-size:24px;字体系列：iconfont；内容：“\e657”；颜色：#000；}进入iconfont后，默认是Unicode。点击字体类红线连接，可以直接打开查看源码。与上述相同。上面：before中内容中的字符都是Unicode，扩展了next函数dynamic加载页面内容时经常用到“loading...”这几个字。这个技术可以用来实现动态...htmlisloading...cssdot{display:inline-block;高度：1em；行高：1；文字对齐：左吨;垂直对齐：-.25em；溢出：隐藏；}点{显示：块；内容：“...\a..\a.”；空白：预包装；animation:dot3sinfinitestep-startboth;}@keyframesdot{33%{transform:translateY(-2em)}66%{transform:translateY(-1em)}}效果可以看张新旭的博客，ie6~ie9是静态的，支持animation动画的浏览器都是动态的。动画原理是：插入3行内容，分别是3点、2点、1点，然后通过transform控制垂直位置。这里需要注意的地方太多了。为什么元素是::Before，而不是:before，可以用::after吗？从content属性来看，第一行有3个点，最后一行有1个点。为什么这里的空白值是预换行的？而不是预先一一回答这些答案：是一个自定义标签元素。除了简单和明显的语义外，更重要的是便于向后兼容。ie8等低版本浏览器不识别self-dot。定义的HTML标签将显示默认的3个点，并忽略css代码。:before是伪类，::before是伪元素。伪元素使用了::before，显示设置为block，这是为了现代浏览器将原来的3个点推到底部，不会影响3行内容的显示。如果使用::after，就很难达到效果。第一行3个点是为了兼容ie9，ie9和::before应该可以识别，但是不支持动画，所以第一行3个点是为了ie9。pre-wrap换成pre，效果是一样的。content中打开结束符号生成的css中有一个quotes属性，可以指定什么是开引号和闭引号字符？比如为不同的语言指定不同的前后符号：CSSworldisagoodbook</p>css世界是一本好书