css波紋動畫

2020-03-24 19:19:30

字體：大中小

來源：轉載

供稿：網友

css波紋動畫，動畫效果，免費提供源碼~~不要錢拿去研究吧~~

7V$A(MY`[T%FDKM3`XL8G2N.png

代碼：

 !DOCTYPE html  html  head  meta charset= UTF-8  title PHP  /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 >免費拿去研究吧！更多好的源碼盡在PHP ，關注我們給你好看哦~
相關推薦：
jquery實現手勢解鎖源碼
原生js實現可移動的提示div框源碼
css實現會動的貓臉
以上就是css波紋動畫的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。