html旋转动画

来源：互联网发布：李洪成排盘软件下载编辑：程序博客网时间：2024/06/10 15:09
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .bigCircle{            width: 200px;            height: 200px;            border-radius: 50%;            background:green;            margin: 0 auto;           position: relative;            animation: run2 4s infinite linear;        }        .smCircle{            width: 50px;            height: 50px;            border-radius: 50%;            background: black;            margin: 200px auto;            position: absolute;            animation: run 4s infinite linear;        }        .smCircle2{            width: 50px;            height: 50px;            border-radius: 50%;            background: #666;            margin: 280px auto;            position: absolute;            animation: run 5s infinite linear;        }.smCircle3{            width: 50px;            height: 50px;            border-radius: 50%;            background: red;            margin: 360px auto;            position: absolute;            animation: run 6s infinite linear;        }.smCircle4{            width: 50px;            height: 50px;            border-radius: 50%;            background: paleturquoise;            margin: 420px auto;            position: absolute;            animation: run 7s infinite linear;        }.smCircle5{            width: 50px;            height: 50px;            border-radius: 50%;            background: rebeccapurple;            margin: 500px auto;            position: absolute;            animation: run 8s infinite linear;        }.smCircle6{            width: 50px;            height: 50px;            border-radius: 50%;            background: blue;            margin: 580px auto;            position: absolute;            animation: run 2s infinite linear;        }.smCircle7{            width: 50px;            height: 50px;            border-radius: 50%;            background: chartreuse;            margin: 660px auto;            position: absolute;            animation: run 6s infinite linear;        }        @keyframes run2 {            0%{                transform: rotate(0deg);            }            100%{                transform: rotate(360deg);            }        }        @keyframes run {            0%{                transform: rotate(0deg);            }            100%{                transform: rotate(-360deg);            }        }    </style></head><body>    <div class="bigCircle">大圈        <div class="smCircle">dddddd                <div class="smCircle3">dddddd</div>                <div class="smCircle5">                    <div class="smCircle4">dddddd</div>                    dddddd                    <div class="smCircle6">dddddd</div>                    <div class="smCircle7">dddddd</div>                </div>                <div class="smCircle2">dddddd            </div>        </div>    </div></body></html>
阅读全文
0 0