cs3s简单动画

        

 

  

  

  

  

  

 

 

 

 

.music{

width:400px;

height:150px;

    margin: 0 auto;

    margin-top:200px;

}

.music span{

width:9px;

height:100%;

background:pink;

display:inline-block;

border-radius:4px;

animation:code1.2s ease infinite;

}

 

.musicspan:nth-child(2){

animation-delay:0.2s;

}

.musicspan:nth-child(3){

animation-delay:0.4s;

}

.musicspan:nth-child(4){

animation-delay:0.6s;

 

}.musicspan:nth-child(5){

animation-delay:0.8s;

}

 

 

@keyframes code{

0%,100%{

 

 

    height:40px;

background:pink;

        

 

}50%{

 

 margin-top:-30px;

            height: 60px;

    background:#B8B1F4;

 

}

}

 

@keyframes muso{

form{

transform:rotate(0deg);

}

to{

     transform:rotate(360deg);

 

}

 }

.muso{

margin:0 auto;

width:250px;

height:250px;

border-radius:100%;

border-top:8pxsolid #F7C3C3;

border-left:8pxsolid #F7C3C3;

border-right:8pxsolid #B8B1F4;

border-bottom:8pxsolid #B8B1F4;

animation:muso2s linear 0s infinite;

 

}

.times p{

text-align:center;

margin-top:-91px;

font-family: '微软雅黑';

color:#6252F2;

}

 

 

 

 

 

 

 

   

  

  

 

@keyframes minute{

form{

transform:rotate(0deg);

}

to{

     transform:rotate(360deg);

 

}

 }

 @keyframes second{

form{

transform:rotate(0deg);

}

to{

     transform:rotate(360deg);

 

}

 }

 /*设置圆形:宽高 居中 边框 定位 背景 border-radius*/

.time{

width:150px;

height:150px;

margin:0auto;

border-radius:60%;

position:relative;

border:3pxsolid pink;

background:pink;

margin-top:80px;

 

}

/*设置分钟:长方形 宽 高 背景 定位 animation name duration秒数linear匀速 ease慢速*/

.minute{

width:4px;

height:45px;

background:#fff;

position:absolute;

left:71px;

    top:39px;

    animation:minute 3600s linear 0s infinite;

    transform-origin:5px bottom;

 

}

.second{

 width:4px;

    height:74px;

    background:#fff;

    position: absolute;

    left:-1px;

    top:-30px;

    animation: second 60s linear 0s infinite;

    transform-origin: 3px bottom;

 

}

/*第二个形状*/

.hed{

width:280px;

height:280px;

margin:0auto;

border-radius:30%;

position:relative;

border:5pxsolid pink;

background:url(../images/zjk.PNG);

margin-top:100px;

}

 

.hed:hover{

width:300px;

background:pink;

animation:width5s linear 0s infinite;

}