Hover动画之图标动画
紧接着上一篇文章, 继续我们的hover动画之路, 这篇文章主要是使用一个图标的hover动画效果.
HTML代码结构如下
<div class="hover"> <span class="icon">☆</span> <span class="text">图标动画</span> </div>
然后就是样式的设定: 首先图标默认肯定是隐藏的. 而且hover的状态下动态效果是从左往右出现.所以给图标设定position.
body { text-align: center; } .hover { display: inline-block; font-weight: bold; color: #ff5500; margin: 100px auto; border: #ff5500 2px solid; position: relative; overflow: hidden; } .hover span { display: inline-block; transition: all 0.3s ease; padding: 5px; font-size: 30px; } .icon { position: absolute; left: -60px; top: 0; transition: all 0.3s ease; background-color: #ff5500; color: #fff; } 设定完默认状态后, 我们来控制他的hover状态. 刚已经讲过, icon的position为absolute, 然后控制他的left从-60变0,这样图标就显示在开始位置. 但是position是不占其位置的大小, 所以文字span设定一个margin-left; 大小根据图标的宽度来确定.
.hover:hover .icon { left: 0; } .hover:hover .text { margin-left: 40px; } 这样就实现了我们想要的效果. 这里不要感觉奇怪咯. 我们没有使用@keyframe就完成了这样的效果. 因为我们设定了 transition 这里在0.3S内完成状态的改变.
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=211 ,欢迎大家传播与分享.
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
