巧妙利用CSS3美化半个字符
当前位置:以往代写 > 网页教程 >巧妙利用CSS3美化半个字符
2019-06-14

巧妙利用CSS3美化半个字符

       随着现代浏览器技术的进步,CSS3的革新,程序员有了更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形,比如下面的这个3D立体字,放在凡人眼里,它们肯定是个图片,找美工做个图就完事了。但如果你仔细研究,就会发现,它们不是图片,是用纯CSS画出来的,这可是爱美程序员的专利喔。

巧妙利用CSS3美化半个字符_CSS3教程_html代码_CSS3代码_课课家

  最近网上又有个技术话题被热炒起来了,就是如何用CSS美化半个字符。大家都知道,对于文本来说,美化的最小单位都是一个字,所以该话题一发起,整个技术圈瞬间就就变热闹了。其实,在这个问题里,包含的不仅仅是技术,还有艺术。

  本教程我们就来学习这样的效果,先来看看效果图

效果图

  做成图片那是很简单的事情,随便一个画图软件都能做到。但是如果要让文字保持可选,并且动态生成的,那该怎么做呢?答案自然就是CSS3。

  当然了,用早期的一些方法也是可以做到的。直接做两个完全重叠的div,然后其中一个div的宽度弄到50%,从而遮挡其中一半。

  但这样会出现太多的元素,而且文字重复,导致很多不必要的字节浪费。

  对于重复字符的情况,其实最好的方法还是利用before或者after伪元素。

  现在我们来构建基础的html代码:

基础代码

  伪元素有个新特性,可以读取元素的属性,然而文本只出现在元素的内容上,所以要让伪元素可以读取得到,我们暂时需要在属性上把文字内容重写一遍,或者利用Javascript读取。但作为纯CSS3教程,此处不介绍后面的方法。

巧妙利用CSS3美化半个字符

  这样的话,伪元素就可以通过attr方法访问data-content属性读取到“课”字了。

  虽然文字内容重复了,但由于标签少了一个,所以文字多了之后,优势仍然相当明显。

  从前面的讨论可知,伪元素跟元素自身需要重叠,然后重叠需要让伪元素做绝对定位,于是,halfStyle样式应该设置为相对定位,让插入的伪元素基于元素自身的左上角作为参考点。

设置halfStyle样式的代码

  block是让元素具备块级特性的方法,目的在于方便插入伪元素,但是单独写block会导致每个字都换行,解决方法是用inline-block代替。

  运行效果如下图所示,暂时没什么特别

block效果图

  现在,我们开始用伪元素插入半个字符了。为便于区分,我们换个字体颜色,比如深红。

  插入类的伪元素有before和after,此处我们用before。

插入伪元素代码

  这里的重点就在于content了,通过attr,读到的就是前面代码中红色高亮部分的属性值。

  再次运行,效果如下图所示

before效果图

  为了让红色字只显示一半,然后让另外的一半显示为黑色,我们让伪元素的宽度等于50%。

设置伪元素宽度代码

  发现效果没有任何变化,为啥呢?因为虽然span伪元素的width等于50%,但默认情况下会被内容撑大,所以我们要通过设置overflow属性强制隐藏超出宽度的部分。

设置overflow属性的代码

  再次运行,效果如下图所示

overflow效果图

      看看,文字还可选的哦,所以绝对不是图片。

#p#分页标题#e#

  至此,美化半个字符的技术问题就得到了解决,实际上,我们还有个after没有用到。所以加上after伪元素,整个字符就可以拆成3部分来设置不同的样式了。

加上after的代码

  这样出来的效果就是一个三色字了,如下图

三色字效果图

  虽然早期的CSS也能实现类似的效果,但是制作成本太高,而且容易出各种浏览器兼容问题,所以不少朋友选择了放弃,但是,近年来网络上又流行的一句话“梦想还是要有的,万一实现了呢?”是不是随着CSS3的问世而让你们产生共鸣了呢?

    关键字:

在线提交作业