十大html鼠标特效,10种炫酷鼠标hover按钮CSS3动画特效

这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。

使用方法

在页面中引入style.css文件。

HTML结构

每一种按钮动画都有它们各自的HTML结构，第一种鼠标hover按钮线条动画中，按钮的HTML结构如下：

Button

CSS样式

按钮的通用样式如下：

button{

width:200px;

height:80px;

position:relative;

background:rgba(255, 255, 255, .27);

text-transform:uppercase;

color:white;

font-weight:700;

letter-spacing:1px;

border:none;

font-size:15px;

outline:none;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

在第一种鼠标hover按钮线条动画中，按钮的线条动画通过:nth-of-type选择器来选择用于制作线条的div元素，并在鼠标hover时修改它们的宽度和高度，形成线条动画的效果。

.border{

position:absolute;

background:none;

transition:all .5s ease-in-out;

}

#first>.border:nth-of-type(1){

top:0;

left:0;

border-left:1px solid white;

border-top:1px solid white;

width:30px;

height:30px;

}

#first>.border:nth-of-type(2){

bottom:0;

right:0;

border-right:1px solid white;

border-bottom:1px solid white;

width:30px;

height:30px;

}

#first:hover .border{

width:205px;

height:85px;

}

其它鼠标hover按钮动画特效请参考源代码。