CSS3学习第八天_border:5px solid gray-CSDN博客

本文链接：https://blog.csdn.net/qq_46563235/article/details/127490764

1、关键帧动画-属性

animation和transition的区别

相同点：都是随着时间改变元素的属性值。

不同点：transition需要触发一个时间（hover事件或click事件等）才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

代码练手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            background: red;

            /* 默认只执行一次 */
            /* 2s   动画执行的时间 */
            /* linear   匀速 */
            /* 3s    延迟3s动画才动 */
            /* 2     执行次数    infinite（无限次） */
            animation: run2 2s linear 3s 2;
        }


        /* 声明动画   run1动画名字*/
        @keyframes run1{
            /* 初始状态 */
            from{
               width: 200px;
               height: 200px;
               background: red;
            }
            /* 变化状态 */
            to{
                width: 200px;
                height: 400px;
                background: yellow;
            }
        }

        /* run2这种写法支持多种状态 */
        @keyframes run2{
            0%{
               width: 200px;
               height: 200px;
               background: red;
            }
            50%{
                width: 200px;
                height: 300px;
                background: greenyellow;
            }
            100%{
                width: 200px;
                height: 400px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、关键帧动画-单一属性（不推荐用，写起来麻烦）

8、animation-fill-mode：控制动画最后的状态

值：none 默认值

forwords 保留最后一帧状态

backwords 保留第一帧的初始状态

3、关键帧动画-轮播属性

效果：

图片一张张轮播，鼠标放上去有暂停的效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 450px;
            height: 250px;
            border: 5px solid gray;
            margin: 0 auto;
            overflow: hidden;
            
        }
        .swiper-container img{
            width: 450px;
            height: 250px;
            float: left;
        }
        .swiper-wrapper{
            width: 1000000px;
            animation: run1 6s linear infinite;
        }
        .swiper-wrapper:hover{
            animation-play-state: paused;
        }
        @keyframes run1 {
            0%{
                transform: translateX(0rem);
            }
            10%{
                transform: translate(-450px);
            }
            25%{
                transform: translate(-450px);
            }
            35%{
                transform: translate(-900px);
            }
            50%{
                transform: translate(-900px);
            }
            60%{
                transform: translate(-1350px);
            }
            75%{
                transform: translate(-1350px);
            }
            85%{
                transform: translate(-1800px);
            }
            100%{
                transform: translate(-1800px);
            }
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/1.jpg" alt="">
            </div>            
            <div class="swiper-slide">
                <img src="img/2.jpg" alt="">
            </div>            
            <div class="swiper-slide">
                <img src="img/3.jpg" alt="">
            </div>            
            <div class="swiper-slide">
                <img src="img/4.jpg" alt="">
            </div>  

            <!--为了实现无缝隙轮播 最后一份根第一份是一样的 -->
            <div class="swiper-slide">
                <img src="img/1.jpg" alt="">
            </div>   

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

4、关键帧动画-逐帧动画案例

代码练手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: rebeccapurple;
            /* 1    0%-50%关键帧一瞬间就过渡的意思    这个值越大，则这个过渡就越慢

            
               end   保留当前帧，看不到最后一帧，动画结束   
               start  保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧
            */
            animation: run1 2s steps(1,end);
            /* steps(1,end)等价于step-end
                steps(1.start)等价于step-start
            */
        }
        @keyframes run1 {
            0%{
                background: rebeccapurple;
            }
            50%{
                background: green;
            }
            100%{
                background: red;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 93px;
            height: 118px;
            background-image: url(./1.png);
            background-position: -93px 0;

            animation: run1 1s step-end infinite;
        }
        @keyframes run1 {
            0%{
                background-position:0px 0;
            }
            14.3%{
                background-position:-93px 0;
            }
            28.6%{
                background-position:-186px 0;
            }
            42.9%{
                background-position:-279px 0;
            }
            57.2%{
                background-position:-372px 0;
            }
            71.5%{
                background-position:-465px 0;
            }
            85.8%{
                background-position:-557px 0;
            }
            100%{
                background-position:-650px 0;
            }

        }
    </style>
</head>
<body>
    <!-- 648*118 -->
    <div></div>
</body>
</html>

5、animate动画库

官网：Animate中文网 – Animate安装、Animate使用、Animate下载
下载文件地址：animate.css – 齐全的CSS3动画库_dowebok

6、3d-平移

代码练手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /* 
            transform-style属性
            值：    flat：2d舞台  默认值
                    preserve-3d 3d舞台
            */
            transform-style: preserve-3d;

            position: relative;
            margin: 0 auto;
            /* transform: rotateY(60deg); */

            /* 设置景深 */
            perspective: 900px;
        }
        .center{
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            transform: translateZ(200px);
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>

7、3d-旋转

代码练手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            display: flex;
            margin: 0 auto;

            transform-style: preserve-3d;
        }
        .center{
            margin: auto;
            width: 200px;
            height: 200px;
            background: red;
            /* 绕着x轴1*30deg，y轴1*30deg，z轴1*30deg旋转 */
            transform: rotate3d(1,1,1,30deg);
            /* 前面三个值取值0-1 */

        }
    </style>
</head>
<body>
    <div class="box">  
        <div class="center"></div>
    </div>
</body>
</html>

8、3d-缩放

代码练手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            display: flex;
            margin: 0 auto;

            transform-style: preserve-3d;

            /* 景深 */
            perspective: 800px;
        }
        .center{
            margin: auto;
            width: 200px;
            height: 200px;
            background: red;
        
            /* scaleZ（）矫情，需要配合许多属性一起使用才有效果，例如景深、旋转 */
            /* transform: scaleZ(12) rotateX(45deg); */


            transform: scale3d(1,1,10) rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">  
        <div class="center"></div>
    </div>
</body>
</html>

9、3d-立方体

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            position: relative;
            margin: 0 auto;

            /* 搭建3d舞台 */
            transform-style: preserve-3d;
            transform: rotateY(-20deg) rotateZ(-20deg);
            animation: run 5s linear infinite;
        }
        @keyframes run {
            0%{
                transform: rotateY(-20deg) rotateZ(-20deg);
            }
            33.3%{
                transform: rotateY(-180deg) rotateZ(-180deg);
            }
            66.6%{
                transform: rotateY(-360deg) rotateZ(-360deg);
            }
            100%{
                transform: rotateY(-180deg) rotateZ(-180deg);
            }
        }
        .box div{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            opacity: 0.5;
        }
        .box div:nth-child(1){
            background: red;
            transform: translateZ(100px);
        }
        .box div:nth-child(2){
            background: rgb(169, 42, 42);
            transform: translateX(-100px) rotateY(-90deg);
        }
        .box div:nth-child(3){
            background: rgb(0, 255, 145);
            transform: translateY(100px) rotateX(90deg);
        }
        .box div:nth-child(4){
            background: rgb(0, 136, 255);
            transform: translateY(-100px) rotateX(-90deg);
        }
        .box div:nth-child(5){
            background: rgb(81, 0, 255);
            transform: translateX(100px) rotateY(90deg);
        }
        .box div:nth-child(6){
            background: rgb(255, 0, 115);
            transform: translateZ(-100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>