CSS3 按钮边框动画的实现
发布时间:2020-11-12 17:10:00 作者:ChiaraLyn 我要评论
这篇文章主要介绍了CSS3 按钮边框动画的实现,帮助大家更好的理解和使用CSS3,美化自身网页,感兴趣的朋友可以了解下
先看效果:
html
<a href="#"> <span></span> <span></span> <span></span> <span></span> Move on </a>
css3
body { margin: 0; padding: 0; background-color: #035f3c; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); color: #16f03a; padding: 30px 60px; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* to delete length of animation lines: */ overflow: hidden; } a:before { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; width: 50%; background: rgba(255, 255, 255, 0.05); } a span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #035f3c, #16f03a); animation: animate1 2s linear infinite; -webkit-animation: animate1 2s linear infinite; } @keyframes animate1 { 0% { transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); } 100% { transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } } a span:nth-child(2) { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #035f3c, #16f03a); animation: animate2 2s linear infinite; -webkit-animation: animate2 2s linear infinite; /* add delay to have continuity on effect*/ animation-delay: 1s; } @keyframes animate2 { 0% { transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); } 100% { transform: translateY(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } } a span:nth-child(3) { position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(to left, #035f3c, #16f03a); animation: animate3 2s linear infinite; -webkit-animation: animate3 2s linear infinite; } @keyframes animate3 { 0% { transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); } } a span:nth-child(4) { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(to top, #035f3c, #16f03a); animation: animate4 2s linear infinite; -webkit-animation: animate4 2s linear infinite; /* add delay to have continuity on effect*/ animation-delay: 1s; } @keyframes animate4 { 0% { transform: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); } 100% { transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); } }
以上就是CSS3 按钮边框动画的实现的详细内容,更多关于CSS3 按钮边框动画的资料请关注脚本之家其它相关文章!
相关文章
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
这篇文章主要介绍了CSS3动画中流彩文字效果+图片模糊效果+边框伸展效果实现,blur滤镜实现和SVG滤镜实现以及SVG作为背景图片载入等操作步骤实现功能,具体操作步骤大家可查2017-08-18- 这篇文章主要介绍了一款效果非常炫酷的CSS3按钮边框动画特效,按钮的边框会以不同的方式进行各种动画,感兴趣的小伙伴们可以参考一下2016-03-16
- 这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下2015-07-22
- 现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们做一个通过 css3 鼠标滑过实现动画线条边框,下面一起看看吧2023-02-22
最新评论