-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-09
来源 ：
阅读 1344
评论 0
摘要：这是一款使用纯CSS3制作的鼠标hover按钮动画特效。该鼠标hover按钮动画特效共15种不同的效果，分别使用CSS3 transition在鼠标hover按钮，或点击按钮时制作出炫酷的动画效果。希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
简要教程
这是一款使用纯CSS3制作的鼠标hover按钮动画特效。该鼠标hover按钮动画特效共15种不同的效果，分别使用css3 transition在鼠标hover按钮，或点击按钮时制作出炫酷的动画效果。
使用方法
在页面中引入font-awesome.min.css文件，general.css是所有按钮的通过文件，必须引入。另外你需要哪种鼠标hover按钮效果，就引入相应的set_n.css文件。
<link href="path/to/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/set_1.css">
HTML结构
第一组鼠标hover按钮动画特效的HTML结构如下：
<!--Set 1 start--> <div class="container_odd"> <div class="set_container"> <a href="#" class="set_1_btn Vbtn-1"> <svg> <rect x="0" y="0" fill="none" width="100%" height="100%"></rect> </svg> Hover </a> <!--End of Button 1 --> <a href="#" class="set_1_btn Vbtn-2">Hover</a> <!--End of Button 2 --> <a href="#" class="set_1_btn Vbtn-3"> <svg> <rect x="0" y="0" fill="none" width="100%" height="100%"></rect> </svg> Hover </a> <!--End of Button 3 --> <a href="#" class="set_1_btn Vbtn-4">Hover</a> <!--End of Button 4 --> <div style="clear:both"></div> </div> </div> <!--Set 1 end-->
每一组鼠标hover按钮动画特效都对应一个CSS文件，例如第一组特效对应set_1.css文件。只需要在页面的<header>中将它引入即可。
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！
喜欢 | 2
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
