HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

基于CSS3 animation的鼠标滑过按钮特效

2016-4-7 10:43| 发布者: admin| 查看: 15220| 评论: 1|来自: jQuery之家

摘要: 这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果,均由按钮的伪元素和CSS3 animation来制作完成。

  简要教程

  这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果,均由按钮的伪元素和CSS3 animation来制作完成。

 

查看演示      下载插件

 

  使用方法

  HTML结构

  该效果通过超链接来制作按钮,例如第一种Swipe效果的HTML代码为:

<a class="btn-0" href="#">Swipe</a>   


  CSS样式

  为了方便,特效中为除了<i>、<em>、<b>、<strong>和<span>之外的所有元素都添加了动画过渡效果。

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}           


  然后为按钮设置通用样式。

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}          


  在第一个DEMO中,通过按钮的:before伪元素来制作深紫色的滑块。滑块采用绝对定位,位于按钮的左侧位置,开始时它的宽度为0.

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}         


  在鼠标滑过按钮时,按钮的字体颜色过渡为白色,:before伪元素的宽度有0变化为100%。

.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}      


  在用户点击按钮时,再为按钮的背景色变换一种较浅的紫色。

.btn-0:active {
  background: #881474;
}        

  其它的鼠标滑过按钮效果的CSS代码请参考下载文件。

 

  来源:jQuery之家

更多
4

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

相关阅读

发表评论

最新评论

引用 meque 2016-5-19 17:08
现在有很多小伙伴在自学,但是一个人的能力是有限的,遇到问题没人帮你解决,我给大家推荐一个大神学习交流q un,希望对大家能有所帮助,q un号前面是思七一,中间是零儿七,后面是一武四。这里每晚都有大牛直播教学。

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 10:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部