当前位置：首页 > 网页特效 > 动画效果

5种纯CSS3鼠标滑过按钮动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

5种纯CSS3鼠标滑过按钮动画特效

简介

##### HTML结构
在第一种按钮鼠标滑过特效中，使用的是SVG线条动画来制作按钮的边框动画。它的HTML结构如下：

```html
<a href="#" class="btn btn-1">
  <svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
  </svg>
 Hover
</a>    
```           
其它几种效果的HTML结构都是基本相同的。

```html
<a href="#" class="btn btn-2">Hover</a> 
 
<a href="#" class="btn btn-3">Hover</a> 
 
<a href="#" class="btn btn-4"><span>Hover</span></a> 
 
<a href="#" class="btn btn-5">Hover</a>       
```         
#####  CSS样式
首先为按钮和它的父容器设置一些通用的CSS样式。

```html
.buttons {
  display: table;
  height: 100%;
  width: 100%;
}
 
.container {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}
.btn {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}
.btn:hover {
  text-decoration: none;
}          
```  
第一种按钮鼠标滑过效果是使用CSS来驱动SVG进行动画，IE10及以下的浏览器不支持第一种特效。关于SVG动画可以参考这里。

```html
.btn-1 {
  background: #e02c26;
  font-weight: 100;
}
.btn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
}
 
.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}
.btn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}           
```

web299.com

5种纯CSS3鼠标滑过按钮动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果