CSS过渡与动画

最新推荐文章于 2024-09-03 16:55:20 发布

伯nulee

最新推荐文章于 2024-09-03 16:55:20 发布

阅读量167

点赞数

分类专栏：日常文章标签： html css3

本文链接：https://blog.csdn.net/liyunfu233/article/details/115310682

版权

日常专栏收录该内容

21 篇文章 0 订阅

订阅专栏

过渡

过渡的基本使用

transition过渡可以为一个元素在不同样式之间自动添加“补间动画”
transition属性四要素
```
transition:width 1s linear 0s;  
/*要过渡的属性  过渡时间  线性过渡  延迟时间*/
transition:top 1s linear 0s;
```
```
<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            transition: border-radius 2s linear 0s;
        }
        .box:hover{
            border-radius: 100px;
        }
    </style>
```
```
<div class="box"></div>
```
效果

那些属性可以参与过渡
- 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius（这些类型的值都是用数值的）
- 背景颜色和文字颜色都可以被过渡
- 所有变形（包括2D和3D）都能被过渡
- 如果要所有属性都参与过渡，可以写all
  
  过渡的四个小属性
  
  属性意义
  transition-property 哪些属性要过渡
  transition-duration 动画时间
  transition-timing-function 动画变化曲线（缓动效果）
  transition-delay 延迟时间
  常用缓动效果
  
  贝塞尔曲线
  
  网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

过渡实战

过渡实战1

/*css代码*/
<style>
        .box{
            margin: 0 auto;
            width: 300px;
            position: relative; 
            overflow: hidden;
            height: 200px;
        }
        .box img{
            width: 300px;
            height: 200px;
        }
        .box .info{
            position: absolute;
            width: 280px;
            height: 30px;
            bottom: 0;
            left: 0;
            padding-left: 20px;
            line-height: 30px;
            color: white;
            background-color: rgba(0, 0, 0, .5);
            /*主要代码 透明度为0 就隐藏了*/
            opacity: 0;
            transition: opacity 1s linear 0s;
        }
        .box:hover .info{
            /*当鼠标滑过时 透明度变为1不透明*/
            opacity: 1;
        }
    </style>

<!--html代码-->
<body>
    <div class="box">
        <img src="images/dog.jpg" alt="">
        <div class="info">狗</div>
    </div>
</body>

使用绝对定位做遮罩层。

过渡实战2

/*css代码*/
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 458px;
            height: 107px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;

        }
        .box ul{
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 107px;
            height: 107px;
            margin-right: 10px;
            position: relative;
        }

        .box ul li::before{
            content: '';
            display: block;
            width: 107px;
            height: 107px;
            transform: rotate(0);
            transition: transform 1s ease-in 0s;
        }
        .box ul li:nth-child(1)::before{
            background: url(images/a_1.png); 
        }
        .box ul li:nth-child(2)::before{
            background: url(images/a_2.png);  
        }
        .box ul li:nth-child(3)::before{
            background: url(images/a_3.png);   
        }
        .box ul li:nth-child(4)::before{
            background: url(images/a_4.png);  
        }
        .box ul li:last-child{
            margin-right: 0;
        }

        .box:hover ul li::before{
            transform: rotate(360deg);
        }

        .box ul li img{
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;

            transition: transform 1s linear 0s;
        }

        .box:hover ul li img{
            transform: scale(1.2);
        }



    </style>

<!--html代码-->
<body>
    <div class="box">
        <ul>
            <li>
               <img src="images/文件类型-pdf.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-引文.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-视频.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-附件.png" alt="">
            </li>
        </ul>
    </div>
</body>

添加before伪元素，将背景设置为需要制作的动画，当鼠标hover时，进行旋转360度。

过渡实战3

/*css代码*/
 <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 800px;

        }

        .box img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: relative;
        }
        .box .cat{
            opacity: 0;
        }
        .box .dog{
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            transition: transform 1s ease 0s;
        }

        .box:hover .dog{
            transform: rotateX(180deg);
        }
        .box:hover .cat{
            opacity: 1;
        }
    </style>

<!--html代码-->
 <div class="box">
        <img src="images/猫.png" class="cat" alt="">
        <img src="images/狗头.png" class="dog" alt="">
    </div>

上层的图片使用绝对定位覆盖，做下面图片的遮罩层，使用transform:rotateX()进行3D变形，此时需要将父盒子添加perspective: 800px; 表示景深。

过渡实战4

/*css代码*/
<style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 10000px;
        }

        .box{
            margin: 200px auto;
            width: 200px;
            height: 200px;
            
            position: relative;
             /* 设置变形类型，保留它内部的3D效果 */
            /* 这个盒子又是舞台又是演员，这个box整体带着里面的p旋转 */
            transform-style: preserve-3d;
            transition: all 10s ease 0s;
        }

        section:hover .box{
            transform: rotateX(360deg) rotateY(360deg);
        }
        .box p{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;

        }

        /* 正面 */
        .box p:nth-child(1){
            background-color: rgba(219, 56, 211, .486);
            transform: translateZ(100px);
        }
        /* 背面 */
        .box p:nth-child(2){
            background-color: rgba(56, 219, 83, .486);
            transform: translateZ(-100px);
        }
        /* 顶部 */
        .box p:nth-child(3){
            background-color: rgba(213, 216, 32, .486);
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box p:nth-child(4){
            background-color: rgba(236,82,102,.486);
            transform: rotateX(90deg) translateZ(100px);
        }
        /* 左侧 */
        .box p:nth-child(5){
            background-color: rgba(12, 230, 14, 0.486);
            transform: rotateY(90deg) translateZ(100px);
        }
        .box p:nth-child(6){
            background-color: rgba(119,17,236,.486);
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>

<!--html代码-->
<body>
    <section>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </section> 
</body>

动画

动画的定义

<style>
@keyframes r{
    from{
        transform:rotate(0);
    }
    to{
        transform:rotate(360deg);
    }
}
/*
	r为动画名字 
	from是动画开始状态
	to是动画结束状态
	还可以使用百分数表示动画阶段 叫做多关键帧动画

*/

@keyframes r{
    0%{
        background-color:red;
    }
     20%{
        background-color:yellow;
    }
     40%{
        background-color:blue;
    }
     60%{
        background-color:green;
    }
    80%{
        background-color:purple;
    }
     100%{
        background-color:orange;
    }
}
</style>