基于CSS3 animation的鼠标滑过按钮特效的实例详解-css教程-PHP中文网

基于CSS3 animation的鼠标滑过按钮特效的实例详解

巴扎黑

发布： 2017-05-27 17:32:00

原创

1922人浏览过

　　简要教程

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

基于CSS3 animation的鼠标滑过按钮特效的实例详解

查看演示 下载插件

　　使用方法

立即学习“前端免费学习笔记（深入）”；

　　HTML结构

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

神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

查看详情

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

登录后复制

　　CSS样式

为了方便，特效中为除了、、、和之外的所有元素都添加了动画过渡效果。

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;
}

登录后复制

以上就是基于CSS3 animation的鼠标滑过按钮特效的实例详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何使用CSS3和JavaScript实现简单的书籍翻页效果？如何让 CSS3 的 video 标签自动播放视频并播放声音？如何用 CSS3 实现列表的无缝滚动效果？ css3选择器的优先级 css3选择器优先级顺序