HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。
对一个文字进行美化
左右型美化
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素(::before|::after),文字进行美化</title> </head> <body> <div> <span data-text='库'>库</span> </div> </body> </html>
CSS代码
*{ padding: 0; margin: 0 } span{ position: relative; font-size: 12rem; color: #0099CC } span::before{ position: absolute; font-size: 12rem; color: #333; content: attr(data-text); white-space:nowrap; width: 50%; display: inline-block; overflow: hidden }
上下型美化
只需要把CSS代码里的width:50%修改成height:50%就可以了,思路是一样的。
对多个文字进行美化
左右型美化
这个其实跟单个字的左右型是一样的,你只需要在HTML代码里添加多行<span>标签包含的字就可以了。代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素(::before|::after),多个文字美化</title> </head> <body> <div> <span data-text='云'>云</span> <span data-text='库'>库</span> <span data-text='网'>网</span> </div> </body> </html>
上下型
上下型有两种方法,一种跟例子3的代码差不多,只需要把width:50%修改成height:50%就可以了。还有一种方法,除了要把 width:50%修改成height:50%,还需要在一个<span>标签里添加多个文字,这种方法其实是最简单的。HTML代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素,文字进行美化</title> </head> <body> <div> <span data-text='云库网'>云库网</span> </div> </body> </html>
动态文字美化
我们先从一个最简单的例子开始
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素,动态文字进行美化</title> </head> <body> <div> <span data-text='云库网'>云库网</span> </div> </body> </html>
CSS代码
*{ padding: 0; margin: 0 } span{ position: relative; font-size: 12rem; color: #0099CC } span::before{ position: absolute; font-size: 12rem; color: #333; content: attr(data-text); white-space:nowrap; height: 50%; display: inline-block; overflow: hidden; transition:1s ease-in-out 0s; } span:hover::before{ height: 0; }
在这里需要注意的是伪类的使用,当这两个伪类放在一起时:hover要放在:before之前,不然就没有效果了。上面这个例子是上下型的,左右型的就可 以在这个例子稍微修改下代码就OK了,把span::before{}伪类元素里的height改成width和给这个伪类添加一个:hover{}样式 就行了,如果是左右型的,那么这里的:hover样式就得对应写成:hover{width:0}
还有一种就是左右上下一起来的我们只需要给上面这个例子中的span::before伪类选择器追加一个width:50%;span:hover::before伪类选择器也添加一个width:0;就可以了,这里的50%和0可以根据个人需要进行更改。
从上面的例子中我们可以看出用一个<span>元素把每个文字 包含起来会更方便,不管是左右型还是上下型都适用。对于上下型的话,就看你想用哪一种效果了。
要每个字单独出来的HTML代码如下
<div> <span data-text='云'>云</span> <span data-text='库'>库</span> <span data-text='网'>网</span> </div>
所有文字在一个<span>标签里HTML代码如下
<div> <span data-text='云库网'>云库网</span> </div>
但他们有一个共同点,那就是CSS样式不需要改动。
DEMO:http://sources.ikeepstudying.com/font-prettify/
原文:http://yunkus.com/article/css3/285.html
本文:使用CSS3伪类元素(::before|::after)对文字进行美化