纯HTML+CSS打造动画

<!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>

评论