6种非常炫酷的CSS3按钮边框动画特效


Posted in HTML / CSS onMarch 16, 2016

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。

6种非常炫酷的CSS3按钮边框动画特效

在线预览    源码下载

使用方法 

HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。

XML/HTML Code复制内容到剪贴板
  1. <button class="draw">draw</button>          

CSS样式

在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。

CSS Code复制内容到剪贴板
  1. button {   
  2.   backgroundnone;   
  3.   border: 0;   
  4.   box-sizing: border-box;   
  5.   box-shadow: inset 0 0 0 2px #f45e61;   
  6.   color#f45e61;   
  7.   font-size: inherit;   
  8.   font-weight: 700;   
  9.   margin: 1em;   
  10.   padding: 1em 2em;   
  11.   text-aligncenter;   
  12.   text-transformcapitalize;   
  13.   positionrelative;   
  14.   vertical-alignmiddle;   
  15. }   
  16. button::before, button::after {   
  17.   box-sizing: border-box;   
  18.   content'';   
  19.   positionabsolute;   
  20.   width: 100%;   
  21.   height: 100%;   
  22. }               
  23.   

以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。

本文就为大家介绍到这,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/w2bc/p/4922347.html

HTML / CSS 相关文章推荐
css3高级选择器使用方法
Dec 02 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 #HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 #HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
destoon各类调用汇总
2014/06/20 PHP
php目录拷贝实现方法
2015/07/10 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python 队列详解及实例代码
2016/10/18 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python实现AI换脸功能
2020/04/10 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
J2EE面试题
2016/03/14 面试题
员工保密承诺书
2014/05/28 职场文书
社团活动总结报告
2014/06/27 职场文书
员工教育培训协议书
2014/09/27 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python