为了账号安全,请及时绑定邮箱和手机立即绑定

css基础-伪元素妙用

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

:first-line  伪元素用于向文本的首行设置特殊样式(只能作用于块级元素)

:first-letter 伪元素用于向文本的首字母设置特殊样式(只能作用于块级元素)

:before  伪元素可以在元素的内容前面插入新内容

:after 伪元素可以在元素的内容之后插入新内容

例子1:绘制三角形

通过以下代码可以简单的绘制三角形

5ba0f15d0001914b06860468.jpg

5ba0f1940001165204000311.jpg

可以根据需求将不需要用到的三角形隐藏:border-color:gray  transparent transparent  transparent

5ba0f19e00018a5303470236.jpg

例子2:绘制太极图

基础结构为2个大小不同的div,通过border-radius将div变为圆形,再由:before制作与div不同原色的半圆

5ba0f1ae0001fbb203330073.jpg

5ba0f1b80001b18504710484.jpg5ba0f1bf0001480b05610319.jpg

绘制左右两边的小圆

5ba0f1ce0001552604430627.jpg

5ba0f1d60001683605810248.jpg

5ba0f1dc0001989105650348.jpg

例子3:加载效果

利用伪元素与h5动画效果实现动画加载效果

5ba0f1ea00011e7403670100.jpg

5ba0f1f20001528906870503.jpg

5ba0f1f9000166b903140329.jpg

5ba0f2000001c1d106620649.jpg

5ba0f2080001468903440328.jpg

最后添加动画效果

5ba0f2160001c80504170201.jpg

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
76
获赞与收藏
534

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消