:before 和 :after的多用途实践 — 特效篇(3)
来源:互联网 发布:抽奖活动软件 编辑:程序博客网 时间:2024/05/21 10:17
说明
上一篇,我们实现了,白光特效,这次,我们来实现几个有关按钮的特效!
按钮动画特效
效果图
代码
<!doctype html><html><head><meta charset="utf-8"><title>button animation</title><style type="text/css">a{ margin: 30px auto 0;}.animBtn{ position: relative; display: block; width: 180px; height:40px; line-height:40px; border: 2px solid #ccc; background:transparent; /* 背景色为透明色,让生成的背景能显示出来 这里可以随便换颜色*/ color: black; text-align: center; /* 文本的采用居中对齐的方式 */ text-decoration: none; /* 标准的文本,没有文本装饰,主要是取消a标签的下划线 */ text-transform: uppercase; /* 元素中的文本全部转为大写 */ overflow: hidden; transition:.3s ease; }/* 生成元素的背景 */.animBtn:after{ content: ""; height: 0%; width: 100%; background:blue; /* 这一小段是为了让生成的背景,始终水平居中和垂直居中 */ position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); /* 这句可以不写,后面在做鼠标悬停效果的时候,因为还需要transform其他值, 所以会再写一遍*/ z-index: -1; /* 取负值,置于底层 用来当做背景 */ transition: all .3s ease 0s;}/* 鼠标悬停,共有的效果 */.animBtn:hover{ color: #fff; text-shadow:7px 7px 2px #646464; background: transparent; /*如果你想让生成的元素显示出来,而且上面你用的不是透明色,记得这里换透明色*/ line-height:34px; border-color:blue;}/* 上下开 */ .animBtn.btnA:after { transform: translateX(-50%) translateY(-50%);}/* 匹配鼠标悬停在元素上时,在元素之后插入的内容 */.animBtn.btnA:hover:after { height: 100%;}/* 左右开 向右旋转45度 */.animBtn.btnB:after { transform: translateX(-50%) translateY(-50%) rotate(45deg);}.animBtn.btnB:hover:after,.animBtn.btnC:hover:after{ height: 400%;}/* 左右开 向左旋转45度 */.animBtn.btnC:after { transform: translateX(-50%) translateY(-50%) rotate(-45deg);}/* 圆形放大 */.animBtn.btnD:after { width: 0%; border-radius: 50%; transform: translateX(-50%) translateY(-50%);}.animBtn.btnD:hover:after { height: 500%; width: 110%;}</style></head><body> <a href="#" class="animBtn btnA">button a</a> <a href="#" class="animBtn btnB">button b</a> <a href="#" class="animBtn btnC">button c</a> <a href="#" class="animBtn btnD">button d</a></body></html>
解释
这4个按钮的特效大同小异,一个一个说一下
按钮一
先利用 :after 伪元素生成一个块级元素,刚开始,这个块级元素的宽虽然是100%,但是它没有高,所以会看不到,然后利用定位 和 转换 让它始终居中,利用下面的代码实现
position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
这样,后面在改变他的高度的时候,能保证距离父元素上下的距离一样,同时还给它加上z-index: -1;
这样它会在最底部显示,不会遮挡住要显示的文字,而父元素的背景为透明色,也保证了能正常显示生成的元素。
接着是实现效果.animBtn:hover
和 .animBtn.btnA:hover:after
这两个选择器下面写的就是了,分别是鼠标悬停在元素上会有的样式 和 鼠标悬停在元素上生成的元素会有的样式。
这次多说一句transition,它使得CSS的属性值在一段时间内平滑过渡
具体参考
http://www.runoob.com/cssref/css3-pr-transition.html
按钮二
生成和实现效果,基本一样,只是多了向右旋转45度 transform: translateX(-50%) translateY(-50%) rotate(45deg);
这里有个小问题,要注意,就是别把这句拆开,写成这样
transform: translateX(-50%) translateY(-50%);transform:rotate(45deg);
说的是不要,这样就覆盖了,就错了。
按钮三
能看明白按钮一和按钮二,你一定明白按钮三,只是换了个方向旋转
按钮四
这个效果重点是border-radius: 50%;
圆角,50%,如果是正方形就会变成圆形,如果是长方形就会变成椭圆。
总结
简单的理解这次的效果就是,生成一个元素当背景,让这个背景,漂亮的显示出来就行了,这是第三篇,讲用伪元素做特效了,而这些还远远只是比较简单的而已,我始终认为,CSS没有想象的那么简单,好玩的东西,还有很多,重点就在于你的想象力了,朋友,还有好多东西,等着你探索呢!
- :before 和 :after的多用途实践 — 特效篇(3)
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 特效篇(2)
- :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的应用
- .before和.after+3D旋转案例(字体翻转的效果)
- mysql触发器Before和After的区别
- @BeforeClass/@AfterClass 和 @Before/@After的区别
- Date的after和before方法解释
- 慎用Date的after和before
- :before和:after的一些惊人用法
- 比特币开发专题(莱特币与比特币本质上的区别)
- 121. Best Time to Buy and Sell Stock
- 浏览器的内核以及他们的前缀
- 文件解析漏洞总结
- 错误1053:服务没有及时响应启动或控制请求
- :before 和 :after的多用途实践 — 特效篇(3)
- 算法引论--寻找一对一映射
- Android模拟器端口被占用问题的解决办法
- yii1电子商城总结
- 在eclipse中把Tomcat 删掉不能重建问题
- 数据结构二叉树
- 怎样用Java写一个计算两个日期之间相差天数的GUI程序?
- 算法引论--寻找一对一映射
- codevs 3037 线段覆盖5 (dp+二分+快排)