How CSS achieves the animated effect of watermark diffusion (pure code)

This article gives you the content is about how the CSS to achieve the spread of the animation effect (pure code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

<div class= "Main Clearfix" > <!--3*70=210 2*50=100 310--> <div class= "Circle" > <!--<div cl      ass= "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 normal Gray hr-x error hr-r correct--<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> &L      T;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" ></di V> <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;}    /* Line */.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;}    /* Button Large: 47 small: 39*/.box-icon{Position:absolute;    z-index:9999;    top:0;    right:0;    left:0;;    bottom:0;    width:70px; height:70px;} /* Small not bright */.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;} /* Small Bright */.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;} /* Big bright */.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;}        /* Dynamic effect */@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-t        Ransform:scale (0.5); *//*opacity:0.5;*//*}*/100% {-webkit-transform:scale (1);    opacity:0.1;    }}/* 70*70 container */.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 and 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 and 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 and Chrome */}