純CSS3實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫(huà)第二節(jié)
我要評(píng)論有了之前的兩章，小伙伴們對(duì)按鈕懸浮動(dòng)畫(huà)是否又有了新的認(rèn)識(shí)呢？
前面兩章主要是從背景著手，而本章主要是圍繞邊框動(dòng)畫(huà)做效果。并且，本章節(jié)（按鈕組:有趣的CSS按鈕動(dòng)畫(huà)，帶你進(jìn)入CSS世界）也就到此結(jié)束了，本章結(jié)尾會(huì)對(duì)前3小節(jié)進(jìn)行一定的總結(jié)。
下面繼續(xù)本小節(jié)的主題，請(qǐng)先看一下效果示例：
看過(guò)前兩小節(jié)的小伙伴，可能不需要看下面的源碼，就知道如何實(shí)現(xiàn)了，大家可以先自己動(dòng)手試試，然后再回頭來(lái)看看?；蛟S實(shí)現(xiàn)方式不一樣，但只要能實(shí)現(xiàn)，都是好方法。
下面對(duì)示例講解
示例一
<button class="btn-1">按鈕一</button>
<style>
button{
position: relative;
width: 100px;
height: 40px;
background: none;
cursor: pointer;
color: #fff;
border: none;
margin-right: 20px;
margin-bottom: 20px;
}
button:before,
button:after{
position: absolute;
content: '';
width: 100%;
height: 100%;
z-index: 10;
transition: all .5s;
}
/* 按鈕一 */
.btn-1:before, .btn-1:after{
height: 2px;
left: 50%;
width: 0;
background: #f13f84;
transform: translateX(-50%);
}
.btn-1:before{
top: 0;
}
.btn-1:after{
bottom: 0;
}
.btn-1:hover:before,
.btn-1:hover:after{
width: 100%;
}
</style>
解析：
1、 :before top為0， :after bottom為0，高度 height: 2px ，而寬度為0，并且水平居中
2、在絕對(duì)定位的作用下， :hover 改變 :before 、 :after 的寬度，即可形成上圖效果
示例二
<button class="btn-2">按鈕二</button>
<style>
...
/* 這里省略上方的公共樣式 */
.btn-2{
background: #333;
height: 36px;
}
.btn-2:before,
.btn-2:after{
width: 10px;
height: 10px;
background: #f13f84;
mix-blend-mode: hue;
}
.btn-2:before {
left: -2px;
top: -2px;
}
.btn-2:after {
right: -2px;
bottom: -2px;
}
.btn-2:hover:before,
.btn-2:hover:after{
height: calc(100% + 4px);
width: calc(100% + 4px);
}
</style>
解析：
1、 :before 、 :after ，超出button 2px
2、 :hover 時(shí)改變 :before 、 :after 寬高，這里寬高用到了 calc()
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。
● 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如： width: calc(100% - 10px) ；
● 任何長(zhǎng)度值都可以使用 calc() 函數(shù)進(jìn)行計(jì)算；
● calc() 函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
● calc() 函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
3、大家應(yīng)該都留意到了上圖中，特意操作了一個(gè)屬性 mix-blend-mode ，它在這里的作用讓button的背景顯示出來(lái)覆蓋在 :before 、 :after 背景色的上方。
css3 mix-blend-mode 語(yǔ)法
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
hue 色相模式 “色相”模式只用“混合色”顏色的色相值進(jìn)行著色，而使飽和度和亮度值保持不變。
這里就不具體講述 mix-blend-mode ，希望后面能用一章來(lái)專門(mén)講解。
示例三
<button class="btn-3">
<span>按鈕三</span>
</button>
<style>
...
/* 這里省略上方的公共樣式 */
button span:before,
button span:after{
position: absolute;
content: '';
width: 100%;
height: 100%;
z-index: 10;
transition: all .5s;
}
.btn-3{
background: #333;
height: 36px;
}
.btn-3:before,
.btn-3:after,
.btn-3 span:before,
.btn-3 span:after{
width: 10px;
height: 10px;
background: #f13f84;
mix-blend-mode: hue;
}
.btn-3:before {
left: -2px;
top: -2px;
}
.btn-3:after {
right: -2px;
top: -2px;
}
.btn-3 span:before {
left: -2px;
bottom: -2px;
}
.btn-3 span:after {
right: -2px;
bottom: -2px;
}
.btn-3:hover:before,
.btn-3:hover:after,
.btn-3:hover span:before,
.btn-3:hover span:after {
height: 60%;
width: 60%;
}
解析：
1、示例三就是示例二的升級(jí)版，用span的偽類來(lái)完善按鈕的四只角
2、 :hover 時(shí)改變四個(gè)偽類的寬高即可。
示例四
<button class="btn-4">按鈕四</button>
<style>
...
/* 這里省略上方的公共樣式 */
.btn-4{
height: 34px;
border: 1px solid #f13f84;
}
.btn-4:before,
.btn-4:after{
width: 10px;
height: 10px;
border-style: solid;
border-color: #f13f84;
}
.btn-4:before {
left: -4px;
top: -4px;
border-width: 1px 0 0 1px;
}
.btn-4:after {
right: -4px;
bottom: -4px;
border-width: 0 1px 1px 0;
}
.btn-4:hover:before,
.btn-4:hover:after{
height: calc(100% + 7px);
width: calc(100% + 7px);
}
解析：
1、示例四是示例二的另外一種實(shí)現(xiàn)方式，不過(guò)區(qū)別是按鈕加了一個(gè)邊框
2、 :before 、 :after 直接設(shè)置 border ，而不是用 background 來(lái)展示對(duì)角樣式。
width: 10px; height: 10px; border-style: solid; border-color: #f13f84; border-width: 1px 0 0 1px;
3、然后 :hover 時(shí)改變偽類寬高，即可
示例五
<button class="btn-5">按鈕五</button>
<style>
...
/* 這里省略上方的公共樣式 */
.btn-5{
background: #333;
height: 34px;
border: 1px solid #fff;
}
.btn-5:before,
.btn-5:after{
width: 10px;
height: 10px;
border-style: solid;
border-color: #fff;
}
.btn-5:before {
left: -4px;
top: -4px;
border-width: 1px 0 0 1px;
}
.btn-5:after {
right: -4px;
bottom: -4px;
border-width: 0 1px 1px 0;
}
.btn-5:hover{
border-color: #f13f84;
}
.btn-5:hover:before,
.btn-5:hover:after{
height: calc(100% + 7px);
width: calc(100% + 7px);
border-color: #f13f84;
transform: rotateY(180deg);
}
解析：
1、示例五，與示例四只有2點(diǎn)區(qū)別， :hover 時(shí)，使其偽類旋轉(zhuǎn)180°，同時(shí)改變邊框顏色
border-color: #f13f84; transform: rotateY(180deg);
示例六
<button class="btn-6">
<span>按鈕六</span>
</button>
<style>
...
/* 這里省略上方的公共樣式 */
.btn-6{
overflow: hidden;
}
.btn-6:before,
.btn-6:after,
.btn-6 span:before,
.btn-6 span:after{
background: linear-gradient(to right, rgba(0,0,0,0), #f13f84);
transition: all 2s;
}
.btn-6:before,
.btn-6:after{
width: 100%;
height: 1px;
}
.btn-6:before {
top: 0;
left: -100%;
}
.btn-6:after {
bottom: 0;
right: -100%;
}
.btn-6 span:before, .btn-6 span:after{
width: 1px;
height: 100%;
}
.btn-6 span:before {
bottom: -100%;
left: 0;
}
.btn-6 span:after {
top: -100%;
right: 0;
}
.btn-6:hover:before{
animation: topA 1s linear infinite;
animation-delay: .5s;
}
@keyframes topA{
100%{
left: 100%;
}
}
.btn-6:hover span:after{
animation: rightA 1s linear infinite;
animation-delay: 1s;
}
@keyframes rightA{
100%{
top: 100%;
}
}
.btn-6:hover:after{
animation: bottomA 1s linear infinite;
animation-delay: 1.5s;
}
@keyframes bottomA{
100%{
right: 100%;
}
}
.btn-6:hover span:before {
animation: leftA 1s linear infinite;
animation-delay: 2s;
}
@keyframes leftA{
100%{
bottom: 100%;
}
}
解析：
1、示例六，可以說(shuō)和示例三有一點(diǎn)點(diǎn)相似之處吧，升級(jí)版
2、也是通過(guò)四個(gè)偽類，分別分布在按鈕的上右下左位置，上下的偽類高度是1px，寬是100%，左右的偽類寬度是1px，高是100%，同時(shí)設(shè)置背景為線性漸變 linear-gradient
3、 :hover 時(shí)，上方偽類從左邊-100%的位置，向左邊100%的位置運(yùn)動(dòng)；右邊偽類從上方-100%的位置，向上方100%的位置運(yùn)動(dòng)；下發(fā)偽類從右邊-100%的位置，向右邊100%的位置運(yùn)動(dòng)；左邊偽類從下方-100%的位置，向下方100%的位置運(yùn)動(dòng)。然后設(shè)置延時(shí)執(zhí)行動(dòng)畫(huà)，即可。
需要注意的是延時(shí)執(zhí)行動(dòng)畫(huà)（animation-delay）時(shí)間，一定要調(diào)整好，否則看起來(lái)就沒(méi)有流暢，銜接會(huì)出現(xiàn)問(wèn)題。
示例七
<button class="btn-7">
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="outline" height="100%" width="100%" />
<div class="text">按鈕七</div>
</svg>
</button>
<style>
...
/* 這里省略上方的公共樣式 */
.btn-7{
position: relative;
color: #f13f84;
text-decoration: none;
width: 250px;
height: 50px;
margin: 50px auto;
overflow: hidden;
}
.btn-7 .outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke: #f13f84;
stroke-width: 2px;
fill: transparent;
stroke-dasharray: 100 500;
stroke-dashoffset: 225;
transition: all .5s;
box-sizing: border-box;
}
.btn-7 .text {
position: relative;
top: -35px;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn-7:hover .outline{
stroke-dasharray: 600 0;
stroke-dashoffset: 475;
}
解析：
1、示例七，是一種全選的方式，svg
2、svg 元素描述
<text> 元素用于定義文本
<rect> 定義為矩形形狀（圓形 <circle> 、橢圓 <ellipse> 、線 <line> 、折線 <polyline> 、多邊形 <polygon> 、路徑 <path> ）
3、svg 屬性描述
stroke 定義一條線，文本或元素輪廓顏色
stroke-width 屬性定義了一條線，文本或元素輪廓厚度
stroke-dasharray 屬性用來(lái)設(shè)置描邊的點(diǎn)劃線的圖案范式。就是設(shè)置實(shí)線和虛線的寬度。即有或者沒(méi)有線段的長(zhǎng)度。
stroke-dashoffset 則指定了dash模式到路徑開(kāi)始的距離
具體，后面也提供專門(mén)章節(jié)講述
總結(jié)
本章節(jié)（按鈕組:有趣的CSS按鈕動(dòng)畫(huà)，帶你進(jìn)入CSS世界）到此就結(jié)束了，首先謝謝大家的支持。
通過(guò)本章節(jié)，小伙伴們都學(xué)到了什么？
1、思想，每個(gè)小節(jié)，示例都是從易至難，循序漸進(jìn)；
2、CSS 偽類元素 :before 、 :after 的運(yùn)用
3、html元素的布局，元素水平垂直居中
4、 transition 和 animation 動(dòng)畫(huà)，它們有什么區(qū)別呢（想知道答案的可以看小編歷史文章）？
5、CSS3 線性漸變和徑向漸變
6、相對(duì)定位和絕對(duì)定位靈活運(yùn)用
7、 transform 元素移動(dòng)、變形、旋轉(zhuǎn)等
相關(guān)文章
CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鼠標(biāo)點(diǎn)擊代碼寫(xiě)法
本文給大家分享css代碼實(shí)現(xiàn)鼠標(biāo)滑過(guò)鼠標(biāo)點(diǎn)擊的寫(xiě)法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-26CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫(huà)，具有一定的參考價(jià)值，并兼容目前最新的各類主流瀏覽器，感興趣的小伙伴們可以參考一下2016-03-16純CSS3實(shí)現(xiàn)8組超炫酷鼠標(biāo)滑過(guò)圖片動(dòng)畫(huà)
這篇文章主要為大家分享了8組超炫酷純CSS3鼠標(biāo)滑過(guò)圖片動(dòng)畫(huà)效果，每一個(gè)動(dòng)畫(huà)效果都很精彩，值得大家學(xué)習(xí)借鑒，感興趣的小伙伴們可以參考一下2016-03-16css實(shí)現(xiàn)鼠標(biāo)滑過(guò)五角星高亮效果
關(guān)于星星評(píng)分效果大家一定都不會(huì)陌生，當(dāng)鼠標(biāo)滑過(guò)的時(shí)候會(huì)使相應(yīng)的星星變得高亮，下面就介紹一下如何利用css實(shí)現(xiàn)鼠標(biāo)滑過(guò)五角星高亮效果，對(duì)此功能感興趣的朋友一起學(xué)習(xí)吧2016-01-20純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果,通過(guò)簡(jiǎn)單的css針對(duì)hover設(shè)置實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參2015-09-14CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字彈出一段說(shuō)明文字無(wú)JS代碼
鼠標(biāo)滑過(guò)文字彈出一段說(shuō)明文字CSS實(shí)現(xiàn)，無(wú)JS代碼，下面代碼直接拷貝了就可用2014-05-20純css實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出層效果
彈出層想必大家都有見(jiàn)到過(guò)吧，在以前或許是使用js實(shí)現(xiàn)的，不過(guò)現(xiàn)在我們可以使用純css來(lái)實(shí)現(xiàn)了，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-16CSS控制當(dāng)鼠標(biāo)滑過(guò)時(shí)更換圖片的效果
鼠標(biāo)滑過(guò)時(shí)更換圖片的效果有很多方法可以實(shí)現(xiàn)，在本文將為大家介紹喜愛(ài)如何通過(guò)css來(lái)實(shí)現(xiàn)，感興趣的朋友，不要錯(cuò)過(guò)2013-10-12css實(shí)現(xiàn)鼠標(biāo)滑過(guò)改變文字(中文變英文)
鼠標(biāo)滑過(guò)改變文字的效果想必很多朋友都有遇到過(guò)吧，本文為大家介紹下css是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-09-09
使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果的實(shí)現(xiàn)示例
這篇文章主要介紹了使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-08-13