您的位置：首页 > Web前端 > CSS

CSS3动画-表盘

2016-01-29 10:57 706 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航