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 轴。
时间: 08-30

css3动画-animation之rotate的相关文章

css3动画-animation属性

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧",玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个"Keyframes"是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要

css3 动画(animation)-简单入门

css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画).具体如何使用呢??? 首先定义一个动画,然后引用动画. 定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字.关键字"from"表示开始, "to"表示结束,等同于0% 和 100%.最好使用百分比来表示变化发生的时间,这样的话还可以定义从开

记录CSS3动画animation学习小心得

上个星期在学习JS之余,温习CSS3,在网上看到一个3D立体球的效果,于是自己也按照上面的方法写了一个: 效果(请用chrome浏览): http://htmlpreview.github.io/?https://github.com/yuhaod1/Blog/blob/master/Blog/css3%E7%AB%8B%E4%BD%93%E7%90%83/css3%E7%AB%8B%E4%BD%93%E7%90%83.html 只做了chrome下的效果,不做其它浏览器的兼容: 当时写完代码测

css3中的变形(transform)、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func

CSS3 skew倾斜、rotate旋转动画

css3出现之前.我们实现一个对象的一组连续动画须要通过JavaScript或Jquery编写,脚本代码较为复杂: 若须要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery怎样实现),并且即使能实现预计花的时间代价及维护难度是非常大的,非常多时候仅仅能依靠绘图工具制作此类动画文件: 有时候在想假设不用脚本语言,也不用绘图工作制作动画文件.就能在网页上实现倾斜.旋转之类的动画效果多好. 近期挤出一些业余时间学习CSS3,当中就包括非常多动画演示样例,花了点时间学习和

CSS3动画:transition和animation(一)

1.浏览器支持情况 transform: transition: animation: 2.分别介绍他们的用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜,即可以改变元素的形状. 语法为transform: none|transform-functions;具体的方法参见 W3CSchool上的CSS3 transform 属性介绍 transition 属性是一个简写属性,用于设置四个过渡属性: transition-propert

CSS3动画属性animation的用法

转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和开发时间上提供了便利. animation基本语法是: animation:name keeping-time animate-function delay times iteration final; 第一个参数:name: 动画的名字,即

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

css3动画

css3动画教程 CSS Transition (转换) transition的作用在于,指定状态变化所需要的时间. transition-property transition-duration transition-delay transition-timing-function transition-timing-function 状态变化速度: ease 逐渐放慢 linear 匀速 ease-in 加速 ease-out 减速 cubic-bezier函数:自定义速度模式.工具网站为: