css波紋動(dòng)畫
發(fā)表時(shí)間：2024-05-13 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]css波紋動(dòng)畫，動(dòng)畫效果，免費(fèi)提供源碼~~不要錢拿去研究吧~~代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>PHP中文網(wǎng)</title>...
css波紋動(dòng)畫，
動(dòng)畫效果，免費(fèi)提供
源碼~~不要錢拿去研究吧~~
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文網(wǎng)</title>
<style>
body{
background: #000;
}
.box{
width: 100%;
height: 600px;
background: #000;
}
.vr {
display: block;
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;
background-size: 100% 100%;
z-index: 99;
}
.vr_wrap {
background: #fff;
opacity: 0.7;
filter: alpha(opacity=70);
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
box-shadow: 0px 0px 50px 10px #fbfbfb;
animation: mymove 2s infinite;
/*animation-direction:alternate;*/
border-radius: 50%;
}
.vr_wrap2 {
background: #fff;
opacity: 0.9;
filter: alpha(opacity=90);
border-radius: 50%;
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
box-shadow: 0px 0px 50px 10px #fbfbfb;
animation: mymove1 2s infinite;
/*animation-direction:alternate;*/
}
@keyframes mymove {
0% {
box-shadow: 0px 0px 0px 2px #fff;
height: 71px;
width: 71px;
}
100% {
box-shadow: 0px 0px 0px 20px #fff;
height: 72px;
width: 72px;
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes mymove1 {
0% {
box-shadow: 0px 0px 0px 2px #fff;
height: 71px;
width: 71px;
}
50% {
box-shadow: 0px 0px 0px 20px #fff;
height: 72px;
width: 72px;
opacity: 0;
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
</style>
</head>
<body>
<div class="box">
<a class="vr" href="http://www.php.cn/"></a>
<div class="vr_wrap"></div>
<div class="vr_wrap2"></div>
</div>
</body>
</html>免費(fèi)拿去研究吧！更多好的源碼盡在PHP中文網(wǎng)，關(guān)注我們給你好看哦~
相關(guān)推薦：
jquery實(shí)現(xiàn)手勢(shì)解鎖源碼
原生js實(shí)現(xiàn)可移動(dòng)的提示div框源碼
css實(shí)現(xiàn)會(huì)動(dòng)的貓臉
以上就是css波紋動(dòng)畫的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
