css如何?水紋擴散的動畫效果（純程式碼）

本篇文章給大家帶來的內容是關於css如何?水紋擴散的動畫效果（純程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

<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出錯  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;}/*動效*/@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 */    }