css3动作

最新推荐文章于 2022-01-29 09:59:01 发布

zxc123e

最新推荐文章于 2022-01-29 09:59:01 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签：变换运动

本文链接：https://blog.csdn.net/zxc123e/article/details/49619267

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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）

这里写图片描述

代码：

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

zxc123e

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动作

transition过渡transition参数transition-property 要运动的样子（all || [attr] || none） transition-duration 运动时间 transition-delay 延迟时间 transition-timing-function 运动形式 ease 逐渐变慢默认值 linear 匀速 ease-in 加速 ease
复制链接

扫一扫