CSS3动画-表盘

来源：互联网发布：卢松松博客模板php 编辑：程序博客网时间：2024/04/20 18:49
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title></title>        <style>            body,html{                color: #fff;                font-family: 'Source Sans Pro', sans-serif;                background-color: #3399FF;            }            .time{                position: absolute;                top: 50%;                left: 50%;                margin: -50px 0 0 -50px;                width: 100px;                height: 100px;                border-radius: 50%;                box-shadow: inset 0px 0px 0px 2px #fff;            }            .time:before,.time:after{                position: absolute;                content: "";                background-color: #fff;            }            .time:before{                width: 45px;                height: 2px;                top: 50px;                left: 50px;                -webkit-animation: timeabefor 2s linear infinite;                -moz-animation: timeabefor 2s linear infinite;                animation: timeabefor 2s linear infinite;            }            .time:after{                width: 35px;                height: 2px;                top: 50px;                left: 50px;                -webkit-animation: timeafter 8s linear infinite;                -moz-animation: timeafter 8s linear infinite;                animation: timeafter 8s linear infinite;            }            @keyframes timeafter            {                0% {                    transform:rotate(0deg);                    -ms-transform:rotate(0deg);                    -moz-transform:rotate(0deg);                    -webkit-transform:rotate(0deg);                    -o-transform:rotate(0deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px;                }                0% {                    transform:rotate(-360deg);                    -ms-transform:rotate(-360deg);                    -moz-transform:rotate(-360deg);                    -webkit-transform:rotate(-360deg);                    -o-transform:rotate(-360deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px;                }                100% {                    transform:rotate(0deg);                    -ms-transform:rotate(0deg);                    -moz-transform:rotate(0deg);                    -webkit-transform:rotate(0deg);                    -o-transform:rotate(0deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px;                }            }            @keyframes timeabefor            {                0% {                    transform:rotate(0deg);                    -ms-transform:rotate(0deg);                    -moz-transform:rotate(0deg);                    -webkit-transform:rotate(0deg);                    -o-transform:rotate(0deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px;                }                0% {                    transform:rotate(-360deg);                    -ms-transform:rotate(-360deg);                    -moz-transform:rotate(-360deg);                    -webkit-transform:rotate(-360deg);                    -o-transform:rotate(-360deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px                }                100% {                    transform:rotate(0deg);                    -ms-transform:rotate(0deg);                    -moz-transform:rotate(0deg);                    -webkit-transform:rotate(0deg);                    -o-transform:rotate(0deg);                    -webkit-transform-origin:0 0;                    transform-origin:0px 1px                }            }        </style>    </head>    <body>        <div class="time"></div>    </body></html>
这里写图片描述
0 0