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

css基础-伪元素妙用

2018.09.18 20:40 974浏览

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

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

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

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

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

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

例子1:绘制三角形

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


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

例子2:绘制太极图

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

绘制左右两边的小圆

例子3:加载效果

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

最后添加动画效果


点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

4人点赞

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

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消