纯html css博客,纯HTML+CSS打造动画

纯CSS动画

.tank{

width:200px;

height:100px;

margin:100px auto;

border:2px solid blue;

border-radius:0 0 20px 20px;

/*矩形圆角*/

}

.battery{

width:100px;

height:50px;

margin:0px auto;

background-color:cornflowerblue;

border-radius:0 0 50px 50px;

}

.spiale{

width:20px;

height:20px;

border-radius:10px;

background-color:white;

margin:auto;

animation:go 3s infinite linear,gol 300ms infinite linear;

}

.gun{

width:4px;

height:25px;

margin:-2px auto 0px;

background-color:#fff;

transform-origin:top;

animation:go 3s infinite linear;/* 引用 go infinite 无限循环 linear 匀速*/

}

@keyframes gol{

/*4个点*/

0%{box-shadow:0px 50px 0px -7px red,

0px 75px 0px -7px red,

0px 100px 0px -7px red,

0px 125px 0px -7px red;

}

100%{box-shadow:0px 75px 0px -7px red,

0px 100px 0px -7px red,

0px 125px 0px -7px red,

0px 150px 0px -7px red;

}

}

@keyframes go{

0%{transform:rotate(-45deg)}/*-45deg 为-45度*/

50%{transform:rotate(45deg)}

100%{transform:rotate(-45deg)}

}