css3动作

transition过渡

  • transition参数

transition-property 要运动的样子(all || [attr] || none)
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease 逐渐变慢 默认值
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier 贝塞尔曲线(x1,y1,x2,y2)
http://matthewlein.com/ceaser/

  • 过渡完成事件

webkit内核
obj.addEventListener(‘WebkitTransitionEnd’,function(){},false);
obj.addEventListener(‘transitionend’,function{},false);

2D变换

  • transfrom参数

rotate() 旋转函数 取值度数
- deg 度数
- transfrom-origin 旋转的基点
skew() 倾斜函数 取值度数
- skewX() x轴方向倾斜
- skewY() y轴方向倾斜
scale() 缩放函数 取值正数、小数
- scaleX()
- scaleY()
translate() 位移函数 取值像素值
- translateX()
- translateY()
transfrom-origin 设置基点,默认中心点
注意:transfrom执行多种变换时,变换的先后顺序,后面的先执行。

3D变换

transform-style(preserve-3d)建立3D空间
perspective 景深
perspective-origin 景深基点
backface-visibility 隐藏背面
transform 新增函数
- rotateX()
- rotateY()
- rotateZ()
- translateZ()
- scaleZ()

时钟小例(2d)

css3动作_第1张图片

代码:

<!DOCTYPE html>
<html>
<head>
    <mate charset="utf-8">
    <title></title>
    <style id="css" type="text/css"> #clock{ margin: 100px auto; width: 200px; height: 200px; border: 1px solid #000; border-radius: 100px; position: relative; } #list{list-style: none; padding: 0px; margin: 0px; height: 200px; position: relative; } #time{ list-style: none; padding: 0px; margin: 0px; height: 200px; position: relative; top: -200px; } #list li{height: 6px; position: absolute; left:99px; width:2px; background:#000; -webkit-transform-origin:center 100px;} /*#list li:nth-of-type(2){-webkit-transform:rotate(6deg);} #list li:nth-of-type(3){-webkit-transform:rotate(12deg);} #list li:nth-of-type(4){-webkit-transform:rotate(18deg);} #list li:nth-of-type(5){-webkit-transform:rotate(24deg);} #list li:nth-of-type(6){-webkit-transform:rotate(30deg);}*/ #list li:nth-of-type(5n+1){height: 12px;} #time li{width:12px; text-align:center; font:12px "宋体"; position: absolute; left: 94px; top:12px;-webkit-transform-origin:6px 88px;} /*#time li:nth-of-type(2){-webkit-transform:rotate(30deg);} #time li:nth-of-type(3){-webkit-transform:rotate(60deg);} #time li:nth-of-type(4){-webkit-transform:rotate(90deg);} #time li:nth-of-type(5){-webkit-transform:rotate(120deg);}*/ #hour{background: #000; border-radius: 4px; width: 6px; height: 35px; position: absolute; left: 97px; top: 65px; -webkit-transform-origin:bottom;} #min{background: #c0c; border-radius: 4px; width: 4px; height: 45px; position: absolute; left: 98px; top: 55px; -webkit-transform-origin:bottom;} #sec{background:red; border-radius: 2px; width: 2px; height: 65px; position: absolute; left: 99px; top: 35px; -webkit-transform-origin:bottom;} #dot{background: #000; border-radius: 50%; width: 10px; height: 10px; position: absolute; left: 95px; top: 95px;} </style>
</head>
<body>
<div id="clock">
    <ul id="list">

    </ul>
    <ul id="time">

    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="dot"></div>
</div>

<script type="text/javascript"> var oList = document.getElementById("list"); var oCss = document.getElementById("css"); var oTime = document.getElementById("time"); var iList = ""; var iCss = ""; var itime= "<li>12</li>"; var oHour = document.getElementById("hour"); var oMin = document.getElementById("min"); var oSec = document.getElementById("sec"); for (var i = 0; i < 60; i++) { iCss += "#list li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+(i*6)+"deg);}"; iList += "<li></li>"; } oList.innerHTML = iList; oCss.innerHTML += iCss; var iCss2 = ""; for (var i = 1; i < 12; i++) { itime += "<li>"+i+"</li>" iCss2 += "#time li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+i*30+"deg);}"; } oTime.innerHTML = itime; oCss.innerHTML += iCss2; function setTime() { var date = new Date; var sec = date.getSeconds(); var min = date.getMinutes()+sec/60; var hour = date.getHours()+min/60; oSec.style.WebkitTransform = "rotate("+(sec*6)+"deg)"; oMin.style.WebkitTransform = "rotate("+(min*6)+"deg)"; oHour.style.WebkitTransform = "rotate("+(hour*30)+"deg)" } setTime(); setInterval(function(){ setTime(); },1000); </script>
</body>
</html>

你可能感兴趣的:(运动,变换)