过渡/动画/变形

一、过渡（transition）

1.1 transition-property：指定要执行过渡的属性

1.2 transition-duration: 指定过渡效果的特效时间

1.3 transition-timing-function 过渡的时序函数

1.4 transition-delay：过渡前需等待的时间

1.5 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 800px;
            height: 600px;
            background-color: silver;
        }

        .box1 div{
            width: 100px;
            height: 100px;
        }

        .box2{
            background-color: orange;
            margin-bottom: 100px;

            /* 
                过渡（transition）
                    - 通过过渡可以指定一个属性发生变化时的切换方式
                    - 通过位移可以创建一些非常好的效果，提升用户的体验
            */
            /* transition: all 2s; */

            /* 
                transition-property：指定要执行过渡的属性
                    多个属性（height，width...）间用","隔开
                    如果所有属性都需要过渡，则使用all
                    大部分属性都支持过渡效果，注意：过渡时必须从一个有效数值
                    到另一个有效数值
            */
            transition-property: all;

            /* 
                transition-duration: 指定过渡效果的特效时间
            */
            transition-duration: 2s;

            /* 
                transition-timing-function 过渡的时序函数
                    - 指定过渡的执行方式
                    可选值：
                        case：默认值，慢速开始，先加速，再减速
                        linear：匀速运动
                        ease-in：加速运动
                        ease-out：减速运动
                        ease-in-out：先加速，后减速
                        cubic-bezier()：未指定时序函数(贝塞尔曲线)
                            https://cubic-bezier.com
                        steps()：分步执行过渡效果
                            可以设置第二个值：
                                end：在时间结束时执行过渡（默认值）
                                start：在时间开始时执行过渡
            */
            transition-timing-function: cubic-bezier(.32,1.6,.69,-1.05);
            /* transition-timing-function: steps(2, start); */

            /* transition-delay：过渡前需等待的时间 */
            transition-delay: 1s;
        }

        .box3{
            background-color: #bfa;
            transition: all 2s;
        }

        .box1:hover div{
            /* width: 200px;
            height: 200px;
            background-color: skyblue; */
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

注：以上的效果只有在鼠标移入的时候才会发生，不符合用户预期使用，所以我们需要动画来制作。

二、动画（animation）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .box1{
            width: 800px;
            height: 600px;
            background-color: silver;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;

            /* 设置box2的动画 */
            /* animation-name：要对当前元素生效的关键帧的名字 */
            animation-name: test;

            /* animation-duration：动画执行时间 */
            animation-duration: 3s;

            /* animation-delay：动画延迟时间 */
            animation-delay: 2s;

            animation-timing-function: ease-in-out;

            /* 
                animation-iteration-count：动画执行的次数
                    - 次数
                    - infinite 无限执行
            */
            animation-iteration-count: 2;

            /*  
                animation-direction：指定动画运行方向
                    normal：默认值，从 from 向 to 运行，每次如此
                    reverse：从 to 向 from 运行，每次如此
                    alternate：从 from 向 to 运行，重复执行动画时反向执行
                    alternate-reverse：从 to 向 from 运行，重复执行动画时反向执行
            */
            /* animation-direction: alternate; */

            /* 
                animation-play-state：设置动画的执行状态 
                    - running：默认值，动画执行
                    - paused：动画暂停
            */
            /* animation-play-state: paused; */

            /* 
                animation-fill-mode：动画填充模式
                    - none：默认值，动画执行完毕，元素回到原来位置
                    - forwards：动画执行完毕，元素会停止在动画结束的位置
                    - backwards：动画延时等待时，元素就会处于开始位置
                    - both：结合了forwards和backwards
            */
            animation-fill-mode: both;
        }

        /*
            动画：
                动画和过渡类似，都可以实现一些动态效果
                    - 不同：过渡需要在某个属性发生变化时才会触发
                           动画可以自动触发动态效果

                设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每个步骤           
        */
        @keyframes test{
            /* from表示动画的开始位置，也可以使用0% */
            from{
                margin-left: 0;
            }

            /* to表示动画的结束位置，也可以使用100% */
            to{
                margin-left: 700px;
            }
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

2.1 动画（sprite animation——>搜图）

2.2 小球运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ball</title>
    <style>
        .outer{
            height: 700px;
            border-bottom: 10px solid black;

            /* 
                由于父子元素相邻的外边距，子元素的会传递给父元素（上边距）
                导致垂直外边距重叠 
                可以开启BFC
            */
            overflow: hidden;
        }

        .outer div{
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            float: left;
            margin: 0 5px;

            animation: ball 2s ease-in forwards infinite alternate;
        }

        /* .ball2权重比 .outer div 低，故不能覆盖，得增加权重 */
        div.ball2{
            background-color: lawngreen;
            animation-delay: .1s;
        }

        div.ball3{
            background-color: rgb(210, 255, 255);
            animation-delay: .2s;
        }

        div.ball4{
            background-color: orange;
            animation-delay: .3s;
        }

        div.ball5{
            background-color: skyblue;
            animation-delay: .4s;
        }

        div.ball6{
            background-color: pink;
            animation-delay: .5s;
        }

        div.ball7{
            background-color: purple;
            animation-delay: .6s;
        }

        div.ball8{
            background-color: hotpink;
            animation-delay: .1s;
        }

        div.ball9{
            background-color: yellow;
            animation-delay: .2s;
        }

        div.ball10{
            background-color: rgba(0, 130, 252, 0.753);
            animation-delay: .3s;
        }

        div.ball11{
            background-color: rgba(235, 252, 0, 0.521);
            animation-delay: .4s;
        }

        div.ball12{
            background-color: rgba(252, 151, 0, 0.753);
            animation-delay: .5s;
        }

        @keyframes ball{
            from{
                margin-top: 0;
            }

            20%, 60%, to{
                margin-top: 650px;
                animation-timing-function: ease-in;
            }

            40%{
                margin-top: 80px;
            }

            80%{
                margin-top: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="ball"></div>
        <div class="ball2"></div>
        <div class="ball3"></div>
        <div class="ball4"></div>
        <div class="ball5"></div>
        <div class="ball6"></div>
        <div class="ball7"></div>
        <div class="ball8"></div>
        <div class="ball9"></div>
        <div class="ball10"></div>
        <div class="ball11"></div>
        <div class="ball12"></div>
    </div>
</body>
</html>

三、变形（transform）

3.1 平移translate（不占位）

① translateX()：沿着x轴方向平移

② translateY()：沿着y轴方向平移

③ translateZ()：沿着z轴方向平移

　　使用z轴需要设置网页的视距

/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800;

百分比：相对于自身移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形——平移</title>
    <style>
        html{
            /* 视距 */
            perspective: 800px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: teal;
            margin: 100px auto;

            /* transform: translateX(200px); */
            /* transform: translateY(100%); */
            /* transform: translate(200px, 100%); */

            /*  
                z轴平移，调整元素在z轴的位置
                正常情况：调整元素和人眼间的距离，距离越大，元素离人越近

                z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，
                故需要设置视距
            */
            transform: translateZ(200px);
        }

        .box2{
            width: 230px;
            height: 300px;
            background-color: orange;

            /* 过渡效果，显得更加自然 */
            transition: all .2s;
        }

        .box2:hover{
            /* box-shadow: 水平方位  垂直方位  模糊程度  颜色 */
            box-shadow: 8px 4px 10px #999;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

3.2 旋转（rotate）

① rotateX(xxdeg)

② rotateY(xxtturn)

③ rotateZ(xxdeg)

单位：deg、turn

3.2.1 钟表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟表</title>
    <style>
        .clock{
            width: 400px;
            height: 400px;
            /* border: 8px solid black; */
            border-radius: 50%;
            /* 设置背景图片 */
            background-image: url("./img/clock.jpg");
            background-size: contain;

            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }

        /* 居中代码 */
        .sec-wrapper,
        .min-wrapper,
        .hour-wrapper{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        /* 时针 */
        .hour-wrapper{
            width: 60%;
            height: 60%;
            animation: run 7200s linear infinite;
        }

        .hour{
            width: 6px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
        }

        /* 分针 */
        .min-wrapper{
            width: 70%;
            height: 70%;
            animation: run 600s steps(60) infinite;
        }

        .min{
            width: 4px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
        }

        /* 秒针 */
        .sec-wrapper{
            width: 88%;
            height: 88%;
            /* background-color: #fba; */

            animation: run 10s steps(60) infinite;
        }

        .sec{
            width: 2px;
            height: 50%;
            background-color: red;
            margin: 0 auto;
        }

        @keyframes run {
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <!-- 
            由于旋转默认是中心旋转，而钟表的旋转点不是中心点
            解决：
            ① 在表针外添加一个div，让其进行旋转（推荐）
            ② 设置旋转原点(原点不好控制)
            ③ 遮住表针的一半（不推荐）
         -->

        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>


        <div class="min-wrapper">
            <div class="min"></div>
        </div>


        <div class="sec-wrapper">
            <div class="sec"></div>
        </div> 

    </div>
</body>
</html>

　　3.2.2 立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cube</title>
    <style>
        /* 设置视距，一般800-1000px */
        html{
            perspective: 800px;
        }

        .cube{
            width: 200px;
            height: 200px;
            /* background-color: green; */
            margin: 150px auto;

            position: relative;

            /* 设置3d效果 */
            transform-style: preserve-3d;

            animation: turn 4s linear alternate infinite;
        }
        
        @keyframes turn{
            to{
                transform: rotateY(1.5turn) rotateZ(82deg) rotateX(60deg);
            }
        }

        .cube img{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;

            opacity: .7;
        }

        .cube_01{
            transform: rotateY(90deg) translateZ(-100px);
        }

        .cube_02{
            transform: rotateY(-90deg) translateZ(-100px);
        }

        .cube_03{
            transform: rotateX(-90deg) translateZ(-100px);
        }

        .cube_04{
            transform: rotateX(90deg) translateZ(-100px);
        }

        .cube_05{
            transform: translateZ(-100px);
        }

        .cube_06{
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="cube">
        <img class="cube_01" src="./img/cube_01.jpg">
        <img class="cube_02" src="./img/cube_02.jpg">
        <img class="cube_03" src="./img/cube_03.jpg">
        <img class="cube_04" src="./img/cube_04.jpg">
        <img class="cube_05" src="./img/cube_05.jpg">
        <img class="cube_06" src="./img/cube_06.jpg">
    </div>
</body>
</html>

3.3 缩放（scale）

　　① scaleX()：水平方向的缩放

② scaleY()：垂直方向的缩放

③ scale()：双方向的缩放

填的是倍数

以上的操作都是在二维下进行的，如果要弄3D的，需要设置3d变形：

/* 设置3d变形效果 */
transform-style: preserve-3d;

3.4 变形原点（transform-origin）：默认值为center

transform-origin: 20px 20px;

posted @ 2020-11-04 16:57 娜豆阅读(101) 评论(0) 编辑收藏举报

刷新页面返回顶部

娜豆

过渡/动画/变形

一、过渡（transition）

1.1 transition-property：指定要执行过渡的属性

1.2 transition-duration: 指定过渡效果的特效时间

1.3 transition-timing-function 过渡的时序函数

1.4 transition-delay：过渡前需等待的时间

1.5 例子

二、动画（animation）

2.1 动画（sprite animation——>搜图）

2.2 小球运动

三、变形（transform）

3.1 平移translate（不占位）

3.2 旋转（rotate）

3.2.1 钟表

3.2.2 立方体

3.3 缩放（scale）

3.4 变形原点（transform-origin）：默认值为center

公告

　　3.2.2 立方体