CSS 动画,过渡,变形

二十有五
436 阅读1分钟

变形 transform

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
</body>
<script type="text/javascript">
/*
* 实现对元素的移动，缩放，转动，倾斜
* 2D
    * transform-style:flat
        * 默认值，表示所有子元素在2d平面呈现（设置在父元素中）
    * transform-origin:bottom center;
        * 改变中心点
    * translate 平移
        * 沿着X和Y轴移动元素，参数为像素值高：translate(x,y)
        * 沿着X轴移动：translateX(n)
        * 沿着Y轴移动：translateY(n)
    * scale 缩放
        * 改变元素的宽度和高度，参数为缩放倍数(单位是倍数)：scale(x,y)
        * 改变元素的宽度：scaleX(n)
        * 改变元素的高度：scaleY(n)
    * rotate 旋转
        * 参数为旋转角度，单位deg：rotate(angle)
    * skew 倾斜/斜切
        * 参数为倾斜角度，单位deg：skew(x-angle,y-angle)
        * skewX(angle)
        * skewY(angle)
* 3D
    * transform-style:preserve-3d
        * 代表所有子元素在3D空间中呈现（设置在父元素-也就是舞台元素中）
    * prespective（透视点，就是眼睛到屏幕前方的距离）
        * perspective:2000px; 设置镜头距离或者叫透视距离子元素会齐作用（用在舞台元素上）
        * transform:perspective(2000px); 用在当前变形元素上，效果同上
    * translate 平移（需要配合perspective透视点使用）
        * translate3d(x,y,z) 单位是像素，x沿x轴平移，y沿y轴平移，z沿面对你的前后平移
        * translateZ(n) 面对你，向前或者向后平移
    * rotate 旋转（需要配合透视点）
        * rotate3d(1,1,1,45deg) 参数就是0和1，0是不沿此轴旋转，最后一个是度数
        * rotateX(n) 沿着你X轴旋转（上下旋转）
        * rotateY(n) 沿着你Y轴旋转（左右旋转）
        * rotateZ(n) 就是2D旋转的效果，当前面旋转
    * scale 缩放（需要配合3d旋转才能看到效果）
        * scale3d（x,y,z）
        * scaleZ(n)
*/
</script>

</html>

过渡 transition

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
</body>
<script type="text/javascript">
/*

* 通过transition,我们可以在不使用Flash动画或JS的情况下，当元素从一中样式变换为另一种样式时为元素添加效果
* IE9及之前版本不支持
* transition-property
    * 规定应用过渡的css属性的名称
* transition-duration
    * 定义过渡效果花费的时间，默认为0
* transition-timing-function
    * 规定过渡效果的时间曲线，默认为ease
    * 参数
        * linear 均匀运动
        * ease 慢 快 慢
        * ease-in 慢 快
        * ease-out 快 慢
* transition-delay
    * 规定过渡效果延迟时间，默认为0
* transition
    * 复合属性，用于在一个属性中设置四个过渡属性（至少设置两个属性，样式名称，过渡时间）
    * 可以同时改变多个属性的过渡，以","进行分隔，如：transition:width 3s,height 3s,margin-left 3s,margin-top:3s
* 触发过渡
    * 伪元素触发：如：hover
    * 媒体查询触发
    * js事件触发
*/
</script>

</html>

动画 animation

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
</body>
<script type="text/javascript">
/*
* 关键帧 @keyframes
@keyframes 动画名{
    from{
    }
    to{
    }
}
@keyframes 动画名{
    0%{
    }
    50%{
    }
    100%{
    }
}

* animation-name:'animate-name';
    * 指定关键帧动画的名字，这个动画名必须对应一个@keyframes规则
* animate-duration:10s;
    * 动画持续时间
* animation-timing-function:ease-in-out;
    * 动画播放效果，和transition-timing-func类似
* animation-delay:2s;
    * 动画延迟时间
* animation-iteration-count:10s;
    * 定义循环次数
    * infinite为无限次
* animation-direction:alternate;
    * 指定动画的播放方向
    * 参数
    * normal(默认)向前播放
    * alternate摇摆，轮流向前/反向切换
* animation-play-state:paused;
    * 设置动画的播放状态
    * 参数
    * paused 暂停
    * running（默认）从开始或暂停的位置重新播放
* animation-fill-mode:forwards;
    * 设置动画时间外属性
    * 参数
    * none（默认）动画结束后返回初始帧处
    * forwards 动画结束后继续应用最后帧的位置
    * backwards 向元素应用动画时迅速应用动画的初始帧
    * toth 动画同时具有forwards和backwards的效果
* animation
    * 复合属性，复合使用参数如下
        * 动画名称
        * 动画执行时间
        * 动画执行速度曲线
        * 延迟时间
        * 执行次数（infinite为无限次）
        * 是否逆向
        * 动画是否暂停或开启
        * 动画运行后的填充状态（是否会到原处）

*/
</script>

</html>

示例

大风车

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        position: relative;
        border-radius: 50%;
        background-color: pink;
        /* 动画 */
        animation: moveCircle 1s linear infinite paused;
    }

    @keyframes moveCircle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #box div {
        width: 150px;
        height: 50px;
        position: absolute;
        top: 100px;
        /*background-color: orange;*/
        border-top-left-radius: 100%;
        transform-origin: bottom right;
    }

    #box div:nth-of-type(1) {
        background-color: red;
    }

    #box div:nth-of-type(2) {
        background-color: green;
        transform: rotate(90deg);
    }

    #box div:nth-of-type(3) {
        background-color: deepskyblue;
        transform: rotate(180deg);
    }

    #box div:nth-of-type(4) {
        background-color: yellow;
        transform: rotate(270deg);
    }

    input {
        width: 200px;
        height: 50px;
        display: block;
        margin: 50px auto;
        font-size: 30px;
        background-color: orange;
    }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <input type="button" value="开始" />
    <script type="text/javascript">
    var btn = document.querySelector("input");
    var box = document.querySelector("#box");

    btn.onclick = function() {
        if (this.value == '开始') {
            this.value = '结束';
            box.style.animationPlayState = 'running';
        } else {
            this.value = '开始';
            box.style.animationPlayState = 'paused';
        }
    }
    </script>
</body>

</html>

立方体

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        position: relative;
        transform-style: preserve-3d;
        animation: moveRect 2s linear infinite paused;
    }

    @keyframes moveRect {
        from {
            transform: perspective(1200px) rotateX(0) rotateY(0);
        }

        to {
            transform: perspective(1200px) rotateX(360deg) rotateY(360deg);
        }
    }

    #box div {
        width: 300px;
        height: 300px;
        position: absolute;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        line-height: 300px;
        background-color: orange;
    }

    #box div:nth-of-type(1) {
        background-color: red;
        transform: translateZ(150px);
    }

    #box div:nth-of-type(2) {
        background-color: green;
        transform: translateZ(-150px);
    }

    #box div:nth-of-type(3) {
        background-color: deepskyblue;
        transform: rotateX(90deg) translateZ(150px);
    }

    #box div:nth-of-type(4) {
        background-color: deeppink;
        transform: rotateX(-90deg) translateZ(150px);
    }

    #box div:nth-of-type(5) {
        background-color: yellow;
        transform: rotateY(90deg) translateZ(150px);
    }

    #box div:nth-of-type(6) {
        background-color: yellow;
        transform: rotateY(-90deg) translateZ(150px);
    }

    input {
        width: 200px;
        height: 50px;
        display: block;
        margin: 50px auto;
        font-size: 30px;
        background-color: orange;
    }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <input type="button" value="开始" />
    <script type="text/javascript">
    var btn = document.querySelector("input");
    var box = document.querySelector("#box");
    btn.onclick = function() {
        if (this.value == '开始') {
            this.value = '结束';
            box.style.animationPlayState = 'running';
        } else {
            this.value = '开始';
            box.style.animationPlayState = 'paused';
        }
    }
    </script>
</body>

</html>

钟表

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        border: 5px solid black;
        border-radius: 50%;
        position: relative;
    }

    #box .kedu {
        width: 30px;
        height: 150px;
        position: absolute;
        top: 0;
        left: 135px;
        text-align: center;

        /* 改变变形中心点 */
        transform-origin: bottom center;
    }

    #hour {
        width: 14px;
        height: 90px;
        position: absolute;
        background-color: black;
        left: 145px;
        top: 60px;
        transform-origin: bottom center;
    }

    #minute {
        width: 12px;
        height: 110px;
        position: absolute;
        background-color: deepskyblue;
        left: 145px;
        top: 40px;
        transform-origin: bottom center;
    }

    #second {
        width: 10px;
        height: 130px;
        position: absolute;
        background-color: deeppink;
        left: 145px;
        top: 20px;
        transform-origin: bottom center;
    }
    </style>
</head>

<body>
    <div id="box">
        <!-- 表针 -->
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
    var box = document.querySelector("#box");

    //循环动态创建刻度
    for (var i = 0; i < 12; i++) {
        var tempKeDuDiv = document.createElement('div');
        tempKeDuDiv.className = 'kedu';

        var tempKeDuP = document.createElement('p');
        tempKeDuP.innerHTML = (i == 0) ? 12 : i;
        tempKeDuDiv.appendChild(tempKeDuP);

        //          tempKeDuDiv.innerHTML = (i == 0) ? 12 : i;
        //          python 和 ruby 语言的 两种哲学！！！

        //表盘的一圈是360deg，总共有12个刻度，每个刻度之间是360 / 12 = 30deg
        tempKeDuDiv.style.transform = 'rotate(' + i * 30 + 'deg)';
        //每个刻度自身在转回去
        tempKeDuP.style.transform = 'rotate(' + (-i * 30) + 'deg)';

        box.appendChild(tempKeDuDiv);
    }

    var hourDiv = document.querySelector('#hour');
    var minuteDiv = document.querySelector('#minute');
    var secondDiv = document.querySelector('#second');

    var date = new Date();

    //因为24小时制计算起来比较麻烦，我们改成12小时制就可以了。
    var hour;
    var minute;
    var second = date.getSeconds();

    //设置表针
    function setPointers() {
        second++;
        date.setSeconds(second);

        hour = date.getHours() % 12;
        minute = date.getMinutes();
        second = date.getSeconds();

        console.log(hour + " : " + minute + " : " + second);

        //1圈是360deg，1圈是60s，每秒走多少度：360 / 60 = 6deg
        secondDiv.style.transform = 'rotate(' + second * 6 + 'deg)';

        //1圈是360deg，1圈是60m，每分走多少度：360 / 60 = 6deg
        minuteDiv.style.transform = 'rotate(' + minute * 6 + 'deg)';

        //1圈是360deg，1圈是12h，每小时走多少度：360 / 12 = 30deg
        //1小时是60分钟，1小时是30deg，每分钟多少度：30 / 60 = 0.5deg
        hourDiv.style.transform = 'rotate(' + (hour * 30 + minute * 0.5) + 'deg)';
    }

    //初始化调用下设置表针
    setPointers();

    setInterval(setPointers, 1000);
    </script>
</body>

</html>
avatar
文章
阅读
粉丝