接著上次關(guān)于頁面布局中,內(nèi)容模塊里的按鈕,鼠標(biāo)經(jīng)過的動(dòng)畫效果的總結(jié)。鼠標(biāo)經(jīng)過的按鈕的時(shí)候會(huì)觸發(fā)各種效果,如漸變、放大、旋轉(zhuǎn)抑或是翻轉(zhuǎn)等效果。
開始的按鈕樣式,如下圖
鼠標(biāo)移入最終的效果
動(dòng)態(tài)效果三:
Html
<div class="xbtn1">
<a href="">
了解更多
</a>
</div>
Css
.xbtn1 a{
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 50px;
line-height: 50px;
max-width: 150px;
text-align: center;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
color: #FFFFFF;
}
.xbtn1 a:after{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: #FFFFFF transparent transparent transparent;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.xbtn1 a:hover:after {
border-width: 330px 330px 0 0;
}
.xbtn1 a:hover{
color: #1b3952;
}
動(dòng)態(tài)效果四:
Html
<div class="xbtn2">
<a href="">
了解更多
</a>
</div>
Css
.xbtn2 a{
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 50px;
line-height: 50px;
max-width: 150px;
text-align: center;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}
.xbtn2 a:before{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #1b3952;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.xbtn2 a:after{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent #1b3952 transparent;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.xbtn2 a:hover {
color: #FFFFFF;
}
.xbtn2 a:hover:before {
border-width: 150px 0 0 150px;
}
.xbtn2 a:hover:after {
border-width: 0 0 150px 150px;
}
接下來動(dòng)態(tài)效果五,這種動(dòng)態(tài)效果是鼠標(biāo)移入,出現(xiàn)背景和水波紋的效果,如下圖是最開始的樣式,關(guān)于分享的圖標(biāo)是用切了顏色不一樣的兩張圖標(biāo),一張是白色,一張是黑色,黑色圖標(biāo)是輸入移入之后的效果,圖標(biāo)的背景變白色,周圍出現(xiàn)的波紋,主要用偽類實(shí)現(xiàn)的。
下面是鼠標(biāo)移入的效果
Html
<div class="foot-share">
<ul>
<li>
<a href="">
<img src="images/img1.png" class="ic1"/>
<img src="images/img1a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img2.png" class="ic1"/>
<img src="images/img2a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img3.png" class="ic1"/>
<img src="images/img3a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img4.png" class="ic1"/>
<img src="images/img4a.png" class="ic2"/>
</a>
</li>
</ul>
</div>
下面關(guān)于樣式有點(diǎn)多,主要的樣式是關(guān)于偽類做的波紋
當(dāng)前名稱:網(wǎng)站前端制作之鼠標(biāo)經(jīng)過按鈕效果二
網(wǎng)址分享:http://m.newbst.com/news33/241783.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)