<divclass="mainclearfix">

 

　　<!--3*70=2102*50=100310-->

 

　　<divclass="circle">

 

　　<!--<divclass="box"></div>-->

 

　　<divclass="box-a"></div>

 

　　<divclass="box-b"></div>

 

　　<divclass="box-c"></div>

 

　　<divclass="box-iconicon-aicon-a-1"></div>

 

　　</div>

 

　　<!--hr正常灰色hr-x出错hr-r正确-->

 

　　<divclass="hrhr-x"></div>

 

　　<divclass="circle">

 

　　<!--<divclass="box"></div>-->

 

　　<divclass="box-a"></div>

 

　　<divclass="box-b"></div>

 

　　<divclass="box-c"></div>

 

　　<divclass="box-iconicon-bicon-b-2"></div>

 

　　</div>

 

　　<divclass="hrhr-r"></div>

 

　　<divclass="circle">

 

　　<!--<divclass="box"></div>-->

 

　　<divclass="box-a"></div>

 

　　<divclass="box-b"></div>

 

　　<divclass="box-c"></div>

 

　　<divclass="box-iconicon-cicon-c-3"></div>

 

　　</div>

 

　　</div>

 

　　css：

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　.main{

 

　　position:relative;

 

　　height:70px;

 

　　width:310px;

 

　　margin:0auto;

 

　　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-repeatcentercenter;

 

　　background-size:auto18px;

 

　　}

 

　　.hr-x{

 

　　background:url("../images/hr_2.png")no-repeatcentercenter;

 

　　background-size:auto18px;

 

　　}

 

　　.hr-r{

 

　　background:url("../images/hr_3.png")no-repeatcentercenter;

 

　　background-size:auto18px;

 

　　}

 

　　/*按钮大：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-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　.icon-b{

 

　　background:url("../images/icon_b_3.png")no-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　.icon-c{

 

　　background:url("../images/icon_c_3.png")no-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　/*小亮*/

 

　　.icon-a-1{

 

　　background:url("../images/icon_a_2.png")no-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　.icon-b-1{

 

　　background:url("../images/icon_b_2.png")no-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　.icon-c-1{

 

　　background:url("../images/icon_c_2.png")no-repeatcentercenter;

 

　　background-size:39px39px;

 

　　}

 

　　/*大亮*/

 

　　.icon-a-2{

 

　　background:url("../images/icon_a_1.png")no-repeatcentercenter;

 

　　background-size:47px47px;

 

　　}

 

　　.icon-b-2{

 

　　background:url("../images/icon_b_1.png")no-repeatcentercenter;

 

　　background-size:47px47px;

 

　　}

 

　　.icon-c-2{

 

　　background:url("../images/icon_c_1.png")no-repeatcentercenter;

 

　　background-size:47px47px;

 

　　}

 

　　/*动效*/

 

　　@keyframeswarn{

 

　　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-keyframeswarn{

 

　　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:6pxsolidrgba(225,225,225,0.5);

 

　　-webkit-border-radius:70px;

 

　　-moz-border-radius:70px;

 

　　border-radius:70px;

 

　　z-index:1;

 

　　opacity:0;

 

　　-webkit-animation:warn4sease-outinfinite;

 

　　-moz-animation:warn4sease-outinfinite;

 

　　animation:warn4sease-outinfinite;

 

　　}

 

　　.box-a{

 

　　position:absolute;

 

　　width:70px;

 

　　height:70px;

 

　　border:6pxsolidrgba(225,225,225,0.5);

 

　　-webkit-border-radius:70px;

 

　　-moz-border-radius:70px;

 

　　border-radius:70px;

 

　　z-index:1;

 

　　opacity:0;

 

　　-webkit-animation:warn4sease-outinfinite;

 

　　-moz-animation:warn4sease-outinfinite;

 

　　animation:warn4sease-outinfinite;

 

　　animation-delay:1s;

 

　　-webkit-animation-delay:1s;/*Safari和Chrome*/

 

　　}

 

　　.box-b{

 

　　position:absolute;

 

　　width:70px;

 

　　height:70px;

 

　　border:6pxsolidrgba(225,225,225,0.5);

 

　　-webkit-border-radius:70px;

 

　　-moz-border-radius:70px;

 

　　border-radius:70px;

 

　　z-index:1;

 

　　opacity:0;

 

　　-webkit-animation:warn4sease-outinfinite;

 

　　-moz-animation:warn4sease-outinfinite;

 

　　animation:warn4sease-outinfinite;

 

　　animation-delay:2s;

 

　　-webkit-animation-delay:2s;/*Safari和Chrome*/

 

　　}

 

　　.box-c{

 

　　position:absolute;

 

　　width:70px;

 

　　height:70px;

 

　　border:6pxsolidrgba(225,225,225,0.5);

 

　　-webkit-border-radius:70px;

 

　　-moz-border-radius:70px;

 

　　border-radius:70px;

 

　　z-index:1;

 

　　opacity:0;

 

　　-webkit-animation:warn4sease-outinfinite;

 

　　-moz-animation:warn4sease-outinfinite;

 

　　animation:warn4sease-outinfinite;

 

　　animation-delay:3s;

 

　　-webkit-animation-delay:3s;/*Safari和Chrome*/

 

　　}