首页 > 代码库 > css3动画-animation之rotate
css3动画-animation之rotate
/* Timer*/
.timer{ width: 240px; height: 240px; background-color: transparent; box-shadow: inset 0px 0px 0px 2px #fff; border: 2px #f00 solid; border-radius: 50%; position: relative; margin: 38px auto; }
.timer:after, .timer:before{ position: absolute; content:""; background-color: #fff; }
.timer:after{ width: 10px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: minhand 2s linear infinite; -moz-animation: minhand 2s linear infinite; animation: minhand 2s linear infinite; }
.timer:before{ width: 8px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: hrhand 8s linear infinite; -moz-animation: hrhand 8s linear infinite; animation: hrhand 8s linear infinite; }
span.s1 { position: absolute; top:120px; left:120px; width: 60px; border-top: 2px #0f0 solid; -webkit-transform-origin: left top; -webkit-transition-delay: 0; -webkit-animation: minhand 3s linear infinite; }
span.s2 { position: absolute; top:120px; left:120px; width: 0px; height: 80px; border-left: 2px #00f solid; -webkit-transform-origin: left top; -webkit-transition-delay: 0; -webkit-animation: hrhand 1s linear infinite; }
span.s3 { position: absolute; width: 6px; height: 6px; top: 117px; left: 117px; background: #000; border-radius: 3px; text-align: center; vertical-align: middle; }
@-webkit-keyframes minhand{
0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes minhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes minhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@-webkit-keyframes hrhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes hrhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes hrhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
<!-- 时间 -->
<div class="timer">
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
</div>
**************
2D Transform 方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
css3动画-animation之rotate