:before 和 :after的多用途实践 — 特效篇(1)
来源:互联网 发布:软件开发企业 编辑:程序博客网 时间:2024/05/21 10:46
说明
之前的两篇文章
:before 和 :after的多用途实践 — 基础篇
http://blog.csdn.net/fe_dev/article/details/71775624
:before 和 :after的多用途实践 — 提升篇
http://blog.csdn.net/fe_dev/article/details/72236681
讲了一些,:before和:after的知识,但是用他们去做页面内容的美化并没有太多,我们知道CSS控制网页内容的外观,CSS的意义就是实现将内容与表现形式分开,这篇开始,我们做几个简单漂亮的页面效果。
遮罩层特效
效果图
代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>遮罩层特效</title> <style> /* 外层容器 */ #container{ width:400px; height:300px; border:1px solid green; position:relative; /* 相对定位,使遮罩层相对于容器进行定位 */ overflow:hidden; /* 溢出隐藏,使遮罩层刚开始的时候不显示 */ } /* 生成遮罩层 */ .shadow:before{ content:attr(data-text); /* 获取元素的 data-text属性的值 生成遮罩层 shadow */ width:100%; height:30%; background:red; color:#fff; text-align:center; box-sizing:border-box; /* padding和border 也算入指定宽高,宽高始终为100%和30% */ padding-top:20px; position:absolute; /* 绝对定位,遮罩层相对容器定位 */ left:0; bottom:-30%; /* 向下偏移-30%,溢出容器,遮罩层开始不显示 */ transition:.5s; /* 过度时间 0.5s */ } /* 鼠标悬停 改变遮罩层位置 */ .shadow:hover:before{ bottom:0; /* 鼠标悬停,遮罩层bottom的属性值为0,相当于向上偏移30%,用时 0.5s */ } </style> </head> <body> <p id="container" class="shadow" data-text="自定义属性"> </p> </body></html>
分析
上面的代码中,我们可以看到,定义了一个叫 shadow 的类选择器,这也是为了方便我们以后使用,如果别的元素需要加遮罩层,直接加上这个类就好了。
注意
1、需要加遮罩层的元素要 position:relative; 进行相对定位,这样是为了让遮罩层相对于元素进行绝对定位,因为position:absolute; 不一定是会相对于父元素进行定位的,所以需要在父元素上加 position:relative; 让遮罩层相对于父元素进行绝对定位。
position:absolute; 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
2、transition 要写在生成遮罩层的样式里(.shadow:before),这样鼠标移入和移出都会有过渡效果,如果写在鼠标移入的样式里(.shadow:hover:before),鼠标移出的时候就没有过渡效果了。
总结
这里实现效果写的代码,只是基础,是为了方便大家理解,剩下的大家就可以自由发挥,比如这个特效,可以继续去改改透明度,改改颜色,随便改什么都好了,哈哈。
简单说下这个特效就是,生成遮罩层设置好偏移量,鼠标移入改变偏移量,这个特效的制作,很简单,但是实现的效果还是不错的,经常见到一些网站会有这样的效果,而实现这样的效果也并非只有这样一种方式,而这种方式我觉得也任然还有改进的余地,如果大家有什么建议,欢迎评论。
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 特效篇(3)
- :before 和 :after的多用途实践 — 基础篇
- :before 和 :after的多用途实践 — 提升篇
- :after/::after和:before/::before的区别
- :before/:after和::before/::after的区别
- css2的特性—:after 和:before
- Date的after和before
- css3的before和after
- before和after的使用
- before 和after的应用
- mysql触发器Before和After的区别
- @BeforeClass/@AfterClass 和 @Before/@After的区别
- Date的after和before方法解释
- 慎用Date的after和before
- :before和:after的一些惊人用法
- ::before和::after伪元素的用法
- MongoDB 3.x+Java 官方学习资料
- 浅谈神经网络发展史:从莫克罗-彼特氏神经模型到深层神经网络
- 科目一考试
- Java的格式化输出
- 学习 ui-router (四): 路由控制
- :before 和 :after的多用途实践 — 特效篇(1)
- 最长回文
- TextView控件常用属性
- List用法总结
- 线程绑定cpu执行源码
- sakila-db示例数据库的安装导入
- JNI的局部和全局引用
- 排序算法总结(5)--堆排序
- 【嵌入式开发】SIP信令交互总结(1)