用CSS3實現(xiàn)如圖的一個按鈕
首先分析一下按鈕的結(jié)構(gòu)組成低零。
這個按鈕其實也是一個超鏈接脱羡，因為可以將其全部寫在一個a標簽中
右邊的箭頭可以用背景圖片來實現(xiàn)
當(dāng)鼠標滑過按鈕里而產(chǎn)生的特效其實是由四條左右上下四條線條組成艺栈，這四個線條可以span標簽來實現(xiàn) ，分別出現(xiàn)在按鈕的左右上下
演示1.gif
- 首先把按鈕的基本結(jié)構(gòu)寫出來
<a href="#" class="button">
Touch
<span class="line lineLeft"></span>
<span class="line lineTop"></span>
<span class="line lineRight"></span>
<span class="line lineButtom"></span>
</a>
這時個還沒有什么效果
image.png
- 編寫按鈕的基本樣式
body{
background: #000;
}
a{
text-decoration: none;
color: #0ff195;
font-size: 26px;
}
.button{
display: block;
width: 180px;
height: 50px;
margin: 50px auto;
padding-left: 30px;
line-height: 50px;
border: 2px solid #fff;
background: url("../image/allow.png") 150px center no-repeat;
}
這時候的效果如下
image.png
- 接著考慮鼠標滑過的第一個效果
背景圖中的箭頭向右滑過了一小段距離
只要把背景圖片的位置向左的距離拉開一點即可
但只如果只設(shè)置位置的改變，那就沒有動畫的效果，因此，需要用到transition屬性权悟，去設(shè)置背景的位置的平滑變化
.button{
display: block;
width: 180px;
height: 50px;
margin: 50px auto;
padding-left: 30px;
line-height: 50px;
border: 2px solid #fff;
background: url("../image/allow.png") 150px center no-repeat;
/*設(shè)置transition屬性使背景平滑向右移動*/
transition: background 0.5s ease;
}
.button:hover{
background-position: 160px center;
}
這時候效果如下
演示2.gif
- 接著考慮動畫線砸王，先把四條線的共同樣式寫出來。
- 四條線都是分別出現(xiàn)在了按鈕的左右上下峦阁，因此都是相對按鈕而進行一個絕對定位的谦铃，需要分別設(shè)定按鈕和線的定位屬性
- 初始狀態(tài)均為不可見，但由于要產(chǎn)生一個動畫效果榔昔，因此使用透明度為0
.line{
display: inline-block;
position: absolute;
background: rgba(255, 255, 255, 0);
}
- 上邊的特效線驹闰，其實就是有一個點從一段距離過來，慢慢地這條線的長度越來越長最后跟按鈕的上邊界重合了
上邊動畫線的初始樣式撒会，先讓其為紅色嘹朗，好觀察變化
.lineLeft{
width: 10px;
height: 2px;
background: #f00;
}
image.png
會發(fā)現(xiàn)線并沒有與上邊界完全重合，因此需要讓其住左和住右再分別移動2px诵肛，才可以與邊界重合
.lineLeft{
width: 10px;
height: 2px;
background: #f00;
top: -2px;
left: -2px;
}
image.png
再設(shè)置線的動畫
- 寬度初始為0屹培，最終為210，為上邊界一樣長
- 開始與按鈕的距離為按鈕的長度怔檩，慢慢向按鈕靠近
.lineLeft{
width: 0px;
height: 2px;
background: #f00;
top: -2px;
left: -210px;
transition: 3s;
}
.button:hover .lineLeft{
width: 210px;
left:-2px;
}
演示3.gif
- 制作了上邊線之后褪秀，剩下三條線的原理是一樣的
上邊線
.lineBottom{
width: 0px;
height: 2px;
background: #f00;
bottom: -2px;
right: -210px;
transition: 3s;
}
.button:hover .lineBottom{
width: 210px;
right: -2px;
}
- 左邊線
.lineLeft{
width: 2px;
height: 0px;
background: #f00;
left: -2px;
bottom: -50px;
transition: 3s;
}
.button:hover .lineLeft{
height: 50px;
bottom: -2px;
}
- 右邊線
.lineRight{
width: 2px;
height: 0px;
background: #f00;
right: -2px;
top: -50px;
transition: 3s;
}
.button:hover .lineRight{
height: 50px;
top: -2px;
}
最后效果
演示4.gif
- 最后再將線的顏色修改為白色即可
演示5.gif
