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 来控制元素的显示和隐藏

CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!

css3动画-animation

animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animation animation-delay:从加载到开始执行的延迟 animation-direction:normal|reverse|alternate|alternate-reverse   参考 normal:往前执行,完成后又回到原点 reverse:和定义的方向相反,完成后回到原点开始执行 al

css3 动画 animation transform

<!DOCTYPE html><!-- saved from url=(0073)http://www.w2bc.com/demo/201504/2015-04-27-jquery-tecent-focus/index.html --><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <m

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

关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中,元素div由50X50红色的大小变化到状态100X100 黄色的过程中,这一头一尾的两个状态起到了对动画定义的关键作用.所以这两个状态就是整个动画的关键帧. @keyframes 定义动画关键帧 通过之前的胡说现在我们看到@keyframes就不会觉得这个@符号有多别扭了.我们使用它来定义动画的关

记录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动画animation

@keyframes film_out{ from{ transform: scale3d(1,1,1) rotate(0); opacity: 1; } to{ transform: scale3d(0.7,0.7,0.7) rotate(90deg); opacity: 0; } } div { animation: film_out 5s linear 2s infinite alternate forwards; -webkit-animation: film_out 5s linear

CSS3 动画Animation的8大属性

animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-name  检索或设置对象所应用的动画名称 必须与规则@keyframes配合使用,eg:@keyframes animations  animation-name:animations; 2.animation-duration  检索或设置对象动画的持续时间 animation-duration:3s;