转载

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内完成状态的改变.

Hover动画之图标动画

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=211 ,欢迎大家传播与分享.

原文 http://www.wutongwei.com/front/infor_showone.tweb?id=211

正文到此结束

所属分类：编程技术

本文标签： HTML 代码 UI 文章博客 web http src QQ群 key
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Hover动画之图标动画

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流