今天就跟大家聊聊有關(guān)如何在css實(shí)現(xiàn)水紋擴(kuò)散的動(dòng)畫效果,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)連山,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
<div class="main clearfix"> <!--3*70=210 2*50=100 310--> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-a icon-a-1"></div> </div> <!--hr正?;疑?hr-x出錯(cuò) hr-r正確--> <div class="hr hr-x"></div> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-b icon-b-2"></div> </div> <div class="hr hr-r"></div> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-c icon-c-3"></div> </div> </div>
css:
.main{ position: relative; height:70px; width: 310px; margin: 0 auto; background-color: #f34147; } .circle{ position: relative; float: left; height:70px; width: 70px; } /*線*/ .hr{ position: relative; float: left; width: 50px; height:70px; background: url("../images/hr_1.png") no-repeat center center; background-size: auto 18px; } .hr-x{ background: url("../images/hr_2.png") no-repeat center center; background-size: auto 18px; } .hr-r{ background: url("../images/hr_3.png") no-repeat center center; background-size: auto 18px; } /*按鈕 大:47 小:39*/ .box-icon{ position: absolute; z-index: 9999; top:0; right:0; left:0;; bottom: 0; width: 70px; height: 70px; } /*小 不亮*/ .icon-a{ background: url("../images/icon_a_3.png") no-repeat center center; background-size:39px 39px; } .icon-b{ background: url("../images/icon_b_3.png") no-repeat center center; background-size:39px 39px; } .icon-c{ background: url("../images/icon_c_3.png") no-repeat center center; background-size:39px 39px; } /*小 亮*/ .icon-a-1{ background: url("../images/icon_a_2.png") no-repeat center center; background-size:39px 39px; } .icon-b-1{ background: url("../images/icon_b_2.png") no-repeat center center; background-size:39px 39px; } .icon-c-1{ background: url("../images/icon_c_2.png") no-repeat center center; background-size:39px 39px; } /*大 亮*/ .icon-a-2{ background: url("../images/icon_a_1.png") no-repeat center center; background-size:47px 47px; } .icon-b-2{ background: url("../images/icon_b_1.png") no-repeat center center; background-size:47px 47px; } .icon-c-2{ background: url("../images/icon_c_1.png") no-repeat center center; background-size:47px 47px; } /*動(dòng)效*/ @keyframes warn { 0% { transform: scale(0.6); opacity: 0; } 25% { transform: scale(0.6); opacity: 0.8; } /*50% {*/ /*transform: scale(0.8);*/ /*opacity: 0.4;*/ /*}*/ /*75% {*/ /*transform: scale(0.9);*/ /*opacity: 0.3;*/ /*}*/ 100% { transform: scale(1); opacity: 0.1; } } @-webkit-keyframes warn { 0% { -webkit-transform: scale(0); opacity: 0; } 25% { -webkit-transform: scale(0.6); opacity: 0.8; } /*50% {*/ /*-webkit-transform: scale(0.1);*/ /*opacity: 0.3;*/ /*}*/ /*75% {*/ /*-webkit-transform: scale(0.5);*/ /*opacity: 0.5;*/ /*}*/ 100% { -webkit-transform: scale(1); opacity: 0.1; } } /* 70*70的容器*/ .box{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; } .box-a{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:1s; -webkit-animation-delay:1s; /* Safari 和 Chrome */ } .box-b{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */ } .box-c{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:3s; -webkit-animation-delay:3s; /* Safari 和 Chrome */ }
看完上述內(nèi)容,你們對(duì)如何在css實(shí)現(xiàn)水紋擴(kuò)散的動(dòng)畫效果有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
分享文章:如何在css實(shí)現(xiàn)水紋擴(kuò)散的動(dòng)畫效果
分享鏈接:http://bm7419.com/article38/pssgsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)公司、標(biāo)簽優(yōu)化、域名注冊(cè)、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)