:before 和 :after的多用途实践 — 特效篇(3)
2017-05-29 00:00
302 查看
说明
上一篇,我们实现了,白光特效,这次,我们来实现几个有关按钮的特效!按钮动画特效
效果图代码
<!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的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 特效篇(3)
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 提升篇
- :before 和 :after的多用途实践 — 提升篇
- :before 和 :after的多用途实践 — 基础篇
- :before 和 :after的多用途实践 — 基础篇
- css before&after 特殊用途
- ::before/:before和::after/:after的使用
- 关于伪类元素:before和:after
- Working with BeforeProperties and AfterProperties on SPItemEventReceiver
- 【CSS3】---:before :after生成内容
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用。
- :before和:after的内幕以及伪类
- @Before, @BeforeClass, @After, @AfterClass区别
- 【ZK框架】doBeforeCompose和doAfterCompose
- 理解伪元素 :before 和 :after
- CSS content 属性以及 :before和 :after 伪元素