<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>纯CSS动画</title> <meta charset="utf-8" /> <style> .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)} } </style> </head> <body> <div class="tank"> <div class="battery"> <div class="spiale"></div> <div class="gun"></div> </div> </div> </body> </html>