這是一款鼠標(biāo)hover按鈕動(dòng)畫特效。該特效共有5種hover動(dòng)畫效果，它們?cè)诮Y(jié)構(gòu)布局上使用flex來進(jìn)行布局，并通過css transition來實(shí)現(xiàn)動(dòng)畫效果。

使用方法

HTML結(jié)構(gòu)

該按鈕特效使用元素來來作為按鈕。

Learn More

CSS樣式

按鈕的通用樣式如下：

.effect {

display: inline-block;

position: relative;

text-decoration: none;

color: #fff;

text-transform: capitalize;

font-family: 'Roboto', sans-serif;

font-size: 18px;

padding: 20px 0px;

width: 150px;

border-radius: 6px;

overflow: hidden;

}

每一種按鈕hover動(dòng)畫效果通過effect-*來表示，第一種按鈕hover動(dòng)畫效果的CSS樣式如下：

.effect.effect-1 {

-webkit-transition: all 0.2s linear 0s;

transition: all 0.2s linear 0s;

}

.effect.effect-1:before {

content: "\f178";

font-family: FontAwesome;

font-size: 15px;

position: absolute;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

right: 0;

top: 0;

opacity: 0;

height: 100%;

width: 40px;

-webkit-transition: all 0.2s linear 0s;

transition: all 0.2s linear 0s;

}

.effect.effect-1:hover {

text-indent: -20px;

}

.effect.effect-1:hover:before {

opacity: 1;

text-indent: 0px;

}

其余4種按鈕hover效果的CSS代碼請(qǐng)參考下載文件。

總結(jié)

以上是生活随笔為你收集整理的鼠标动效html,5种纯CSS3鼠标hover按钮动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。