6种非常炫酷的CSS3按钮边框动画特效
发布时间:2016-03-16 10:39:06 作者:佚名 我要评论
这篇文章主要介绍了一款效果非常炫酷的CSS3按钮边框动画特效,按钮的边框会以不同的方式进行各种动画,感兴趣的小伙伴们可以参考一下
这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。
使用方法
HTML结构
该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。
XML/HTML Code复制内容到剪贴板
- <button class="draw">draw</button>
CSS样式
在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。
CSS Code复制内容到剪贴板
- button {
- background: none;
- border: 0;
- box-sizing: border-box;
- box-shadow: inset 0 0 0 2px #f45e61;
- color: #f45e61;
- font-size: inherit;
- font-weight: 700;
- margin: 1em;
- padding: 1em 2em;
- text-align: center;
- text-transform: capitalize;
- position: relative;
- vertical-align: middle;
- }
- button::before, button::after {
- box-sizing: border-box;
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- }
以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。
本文就为大家介绍到这,希望对大家的学习有所帮助。
原文:http://www.cnblogs.com/w2bc/p/4922347.html
相关文章
- 这篇文章主要介绍了CSS3 按钮边框动画的实现,帮助大家更好的理解和使用CSS3,美化自身网页,感兴趣的朋友可以了解下2020-11-12
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
这篇文章主要介绍了CSS3动画中流彩文字效果+图片模糊效果+边框伸展效果实现,blur滤镜实现和SVG滤镜实现以及SVG作为背景图片载入等操作步骤实现功能,具体操作步骤大家可查2017-08-18- 这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下2015-07-22
- 现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们做一个通过 css3 鼠标滑过实现动画线条边框,下面一起看看吧2023-02-22
最新评论