您好,登錄后才能下訂單哦!
這篇“純CSS3如何實現(xiàn)鼠標滑過按鈕動畫”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“純CSS3如何實現(xiàn)鼠標滑過按鈕動畫”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價值,內(nèi)容詳細步驟清晰,細節(jié)處理妥當,希望大家通過這篇文章有所收獲,下面讓我們一起來看看具體內(nèi)容吧。
效果示例:
看過前兩小節(jié)的小伙伴,可能不需要看下面的源碼,就知道如何實現(xiàn)了,大家可以先自己動手試試,然后再回頭來看看。或許實現(xiàn)方式不一樣,但只要能實現(xiàn),都是好方法。
下面對示例講解
示例一
<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、在絕對定位的作用下, :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
時改變 :before
、 :after
寬高,這里寬高用到了 calc()
calc() 函數(shù)用于動態(tài)計算長度值。
● 需要注意的是,運算符前后都需要保留一個空格,例如: width: calc(100% - 10px)
;
● 任何長度值都可以使用 calc()
函數(shù)進行計算;
● calc()
函數(shù)支持 "+", "-", "*", "/" 運算;
● calc()
函數(shù)使用標準的數(shù)學(xué)運算優(yōu)先級規(guī)則;
3、大家應(yīng)該都留意到了上圖中,特意操作了一個屬性 mix-blend-mode
,它在這里的作用讓button的背景顯示出來覆蓋在 :before
、 :after
背景色的上方。
css3 mix-blend-mode
語法
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
hue 色相模式 “色相”模式只用“混合色”顏色的色相值進行著色,而使飽和度和亮度值保持不變。
這里就不具體講述 mix-blend-mode
,希望后面能用一章來專門講解。
示例三
<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、示例三就是示例二的升級版,用span的偽類來完善按鈕的四只角
2、 :hover
時改變四個偽類的寬高即可。
示例四
<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、示例四是示例二的另外一種實現(xiàn)方式,不過區(qū)別是按鈕加了一個邊框
2、 :before
、 :after
直接設(shè)置 border
,而不是用 background
來展示對角樣式。
width: 10px; height: 10px; border-style: solid; border-color: #f13f84; border-width: 1px 0 0 1px;
3、然后 :hover
時改變偽類寬高,即可
示例五
<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點區(qū)別, :hover
時,使其偽類旋轉(zhuǎn)180°,同時改變邊框顏色
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、示例六,可以說和示例三有一點點相似之處吧,升級版
2、也是通過四個偽類,分別分布在按鈕的上右下左位置,上下的偽類高度是1px,寬是100%,左右的偽類寬度是1px,高是100%,同時設(shè)置背景為線性漸變 linear-gradient
3、 :hover
時,上方偽類從左邊-100%的位置,向左邊100%的位置運動;右邊偽類從上方-100%的位置,向上方100%的位置運動;下發(fā)偽類從右邊-100%的位置,向右邊100%的位置運動;左邊偽類從下方-100%的位置,向下方100%的位置運動。然后設(shè)置延時執(zhí)行動畫,即可。
需要注意的是延時執(zhí)行動畫(animation-delay)時間,一定要調(diào)整好,否則看起來就沒有流暢,銜接會出現(xià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
屬性用來設(shè)置描邊的點劃線的圖案范式。就是設(shè)置實線和虛線的寬度。即有或者沒有線段的長度。
stroke-dashoffset
則指定了dash模式到路徑開始的距離
感謝你的閱讀,希望你對“純CSS3如何實現(xiàn)鼠標滑過按鈕動畫”這一關(guān)鍵問題有了一定的理解,具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會,快去試試吧,如果想閱讀更多相關(guān)知識點的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。