css3鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框
發(fā)布時(shí)間:2023-02-22 15:21:58 作者:水星記_
我要評(píng)論

現(xiàn)如今網(wǎng)頁越來越趨近于動(dòng)畫,相信大家平時(shí)瀏覽網(wǎng)頁或多或少都能看到一些動(dòng)畫效果,今天我們做一個(gè)通過 css3 鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框,下面一起看看吧
前言
現(xiàn)如今網(wǎng)頁越來越趨近于動(dòng)畫,相信大家平時(shí)瀏覽網(wǎng)頁或多或少都能看到一些動(dòng)畫效果,今天我們做一個(gè)通過 css3 鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框,下面一起看看吧。
實(shí)現(xiàn)效果
CSS3實(shí)現(xiàn)的鼠標(biāo)滑過邊框線條動(dòng)畫特效源碼
完整源碼
<template> <div class="parentBox"> <div class="contantBox"> <ul class="shelfBox"> <li> <div class="bigBox"> <div class="itemBox"> <div class="textBox"> <p>1.無需下載安裝包</p> <p>2.可多人同時(shí)編輯</p> <p>3.無需下載安裝包</p> <p>4.可實(shí)時(shí)預(yù)覽內(nèi)容</p> </div> <div class="beginbox"></div> <div class="bomBox"></div> <div class="leftBox"></div> <div class="topBox"></div> <div class="rightBox"></div> <div class="pictureBox"><i class="circleBox"></i></div> </div> <div class="iconBox"> <div class="circleBox">+</div> </div> </div> </li> </ul> </div> </div> </template> <style scoped> .parentBox { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } ol, ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption, td, th { text-align: left; font-weight: 400; vertical-align: middle } .bigBox img { border: none } .bigBox { text-decoration: none } .bigBox:hover { cursor: pointer; } img { max-width: 100%; vertical-align: middle } .shelfBox:after, .shelfBox:before { content: " "; display: table } .shelfBox:after { clear: both } .contantBox { position: relative; background-color: #fff; zoom: 1 } .contantBox ul { position: absolute; left: 0; top: 0; width: 1218px; height: 432px; padding-top: 5px; transition: left .8s ease-in-out } .contantBox li { float: left; width: 406px; height: 216px } .contantBox li .bigBox { position: relative; display: block; width: 100%; height: 216px; padding: 10px 0 0 92px; zoom: 1 } .contantBox .itemBox { position: relative; width: 274px; height: 186px; padding: 20px 0 0 60px; background: url('https://hovertree.com/texiao/css3/32/images/hovertree10tanjpxxxxblxpxxxxxxxxxx-274-186.png') 0 0 no-repeat; color: #00a0ff; zoom: 1 } .textBox { color: #666; } .textBox p{ margin: 14px 10px; } .contantBox .beginbox { position: absolute; bottom: -2px; right: -2px; width: 34px; height: 10px; background-color: #fff } .contantBox .bomBox { position: absolute; left: -2px; bottom: -2px; width: 295px; height: 15px; background-color: #fff } .contantBox .leftBox { position: absolute; left: -2px; top: -2px; width: 15px; height: 189px; background-color: #fff } .contantBox .topBox { position: absolute; right: -2px; top: -2px; width: 295px; height: 15px; background-color: #fff } .contantBox .rightBox { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 189px; background-color: #fff } .contantBox .iconBox { position: absolute; left: 53px; top: 35px; width: 100px; height: 110px; padding-top: 12px; background-color: #fff; z-index: 11 } .contantBox .iconBox .circleBox { width: 80px; height: 80px; line-height: 80px; background: url('https://hovertree.com/texiao/css3/32/images/hovertree1.fjxivxxxxbqxvxxxxxxxxxx-80-80.png') 0 0 no-repeat; text-align: center; color: #359EFB; font-size: 28px; } .contantBox .iconBox .iconfont { font-size: 32px; color: #00a0ff } .contantBox .pictureBox { position: absolute; right: -8px; bottom: -3px; width: 0; height: 16px; background-color: #fff; overflow: hidden } .contantBox .pictureBox .circleBox { float: right; width: 17px; height: 16px; background: url('https://hovertree.com/texiao/css3/32/images/hovertree15pjohvxxxxcaxpxxxxxxxxxx-16-16.png') 0 0 no-repeat } .contantBox .bigBox:hover .textBox { color: #00a0ff } .contantBox .bigBox:hover .bomBox { animation: borderslideBottom .15s linear 0s 1; animation-fill-mode: forwards } .contantBox .bigBox:hover .leftBox { animation: bordersildeLeft .2s linear .15s 1; animation-fill-mode: forwards } .contantBox .bigBox:hover .topBox { animation: bordersildeTop .15s linear .35s 1; animation-fill-mode: forwards } .contantBox .bigBox:hover .rightBox { animation: bordersildeRight .2s linear .5s 1; animation-fill-mode: forwards } .contantBox .bigBox:hover .pictureBox { animation: bordersildeEnd .1s linear .7s 1; animation-fill-mode: forwards } @-moz-keyframes borderslideBottom { from { width: 295px } to { width: 0 } } @-webkit-keyframes borderslideBottom { from { width: 295px } to { width: 0 } } @keyframes borderslideBottom { from { width: 295px } to { width: 0 } } @-moz-keyframes bordersildeLeft { from { height: 189px } to { height: 0 } } @-webkit-keyframes bordersildeLeft { from { height: 189px } to { height: 0 } } @keyframes bordersildeLeft { from { height: 189px } to { height: 0 } } @-moz-keyframes bordersildeTop { from { width: 295px } to { width: 0 } } @-webkit-keyframes bordersildeTop { from { width: 295px } to { width: 0 } } @keyframes bordersildeTop { from { width: 295px } to { width: 0 } } @-moz-keyframes bordersildeRight { from { height: 189px } to { height: 0 } } @-webkit-keyframes bordersildeRight { from { height: 189px } to { height: 0 } } @keyframes bordersildeRight { from { height: 189px } to { height: 0 } } @-moz-keyframes bordersildeEnd { from { width: 0 } to { width: 34px } } @-webkit-keyframes bordersildeEnd { from { width: 0 } to { width: 34px } } @keyframes bordersildeEnd { from { width: 0 } to { width: 34px } } </style>
到此這篇關(guān)于css3鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框的文章就介紹到這了,更多相關(guān)css3動(dòng)畫線條邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3 按鈕邊框動(dòng)畫的實(shí)現(xiàn)
這篇文章主要介紹了CSS3 按鈕邊框動(dòng)畫的實(shí)現(xiàn),幫助大家更好的理解和使用CSS3,美化自身網(wǎng)頁,感興趣的朋友可以了解下2020-11-12CSS3動(dòng)畫之流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn)代碼合集
這篇文章主要介紹了CSS3動(dòng)畫中流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn),blur濾鏡實(shí)現(xiàn)和SVG濾鏡實(shí)現(xiàn)以及SVG作為背景圖片載入等操作步驟實(shí)現(xiàn)功能,具體操作步驟大家可查2017-08-18- 這篇文章主要介紹了一款效果非常炫酷的CSS3按鈕邊框動(dòng)畫特效,按鈕的邊框會(huì)以不同的方式進(jìn)行各種動(dòng)畫,感興趣的小伙伴們可以參考一下2016-03-16
利用SVG和CSS3來實(shí)現(xiàn)一個(gè)炫酷的邊框動(dòng)畫
這篇文章主要介紹了利用SVG和CSS3來實(shí)現(xiàn)一個(gè)炫酷的邊框動(dòng)畫,不使用JavaScript使得編寫過程輕松了不少,需要的朋友可以參考下2015-07-22