css3动画

最新推荐文章于 2021-05-26 01:11:19 发布

在下平兄

最新推荐文章于 2021-05-26 01:11:19 发布

阅读量301

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44494778/article/details/98347543

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

transition动画

transform只能制作盒子位置变换，没有过渡效果
transition动画突出一个过渡效果
transi和tionsform实现过渡动画效果
需要与hover配合使用鼠标放上实现过渡动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

盒子大小颜色动画：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #37ab40;
        /*transition: width 1s ease,height 1s linear 1s,background-color 1s ease;*/
        /*全部属性变化方式一样时 简写方法*/
        transition: all 1s ease;         
    }
    div:hover{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div></div>
</body>

文字说明动效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .goods_banner{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        position: relative;
        overflow: hidden;
    }
    .pic_info{
        width: 200px;
        height: 120px;
        position: absolute;
        top: 300px;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        color: white;
        transition: all 1s ease;
    }
    .pic_info h3{
        margin: 10px 10px 0;
    }
    .pic_info p{
        margin: 10px 10px 0;
    }
    .goods_banner:hover .pic_info{
        top: 180px;
    }
</style>
<body>
<div class="goods_banner">
    <img src="web/images/banner01.jpg" alt="">
    <div class="pic_info">
        <h3>草莓</h3>
        <p>草莓营养价值丰富，被誉为是“水果皇后”，含有丰富的维生素C。</p>
    </div>
</div>
</body>
</html>

CSS3 transform变换

transform只能制作盒子位置变换，没有过渡效果
可以配合transition动画实现过渡效果
四种变形方式：
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
变形参数设置：
1、perspective 设置透视距离
2、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
3、translateX、translateY、translateZ 设置三维移动
4、rotateX、rotateY、rotateZ 设置三维旋转
5、scaleX、scaleY、scaleZ 设置三维缩放
6、tranform-origin 设置变形的中心点
7、backface-visibility 设置盒子背面是否可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box1{
        width: 200px;
        height: 200px;
        border: 5px solid black;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box1:hover{
        transform: translate(50px,50px);
    }

    .box2{
        width: 200px;
        height: 200px;
        border: 5px solid black;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box2:hover{
        transform: scale(2,2);
    }

    .box3{
        width: 200px;
        height: 200px;
        border: 5px solid black;
        background-color: gold;
        margin: 50px auto 0;
        /* 设置旋转中心为左边中点 */
        transform-origin: left center;
        transition: all 1s ease;
    }
    .box3:hover{
        transform: rotate(45deg);
    }

    .box4{
        width: 200px;
        height: 200px;
        border: 5px solid black;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box4:hover{
        transform: skew(30deg,30deg);
    }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

animation动画（关键帧动画）

实现动画过渡效果与transition的区别在于animation可以实现自动动画不需要鼠标悬停
animation和tionsform实现过渡动画效果
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite(无限)
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state (鼠标悬停时hover)动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

仅使用animation实现简单过渡动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /* 定义动画 */
    @keyframes moving{  
        from{
            width: 100px;
        }
        to{
            width: 400px;
        }
    }
    div{
        width: 100px;
        height: 100px;
        background-color: yellow;
        animation: moving 1s linear alternate infinite;
    }
    div:hover{
        animation-play-state: paused;
    }
</style>
<body>
    <div></div>
</body>
</html>

animation配合transformm实现风车动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @keyframes fengche {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

    img{
        animation: fengche 500ms linear infinite;
    }
</style>
<body>
<img src="./images/fengche.png" alt="">
</body>
</html>

在这里插入图片描述
实现loading动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @keyframes loading {
        from{
            transform: scale(1,1);
        }
        to{
            transform: scale(1, 0.5);
        }
    }
    .box{
        width: 300px;
        height: 158px;
        border: 1px solid black;
        margin: 50px auto 0;
    }
    .box p{
        text-align: center;
        margin-top: -8px;
    }
    .box div{
        width: 30px;
        height: 100px;
        border-radius: 15px;
        display: inline-block;
        margin: 13px;
        animation: loading 1s linear infinite alternate;
    }
    .box div:nth-child(1){
        background-color: red;
        animation-delay: 100ms;
    }
    .box div:nth-child(2){
        background-color: green;
        animation-delay: 200ms;
    }
    .box div:nth-child(3){
        background-color: plum;
        animation-delay: 300ms;
    }
    .box div:nth-child(4){
        background-color: yellow;
        animation-delay: 400ms;
    }
    .box div:nth-child(5){
        background-color: papayawhip;
        animation-delay: 500ms;

    }
</style>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <p>loading</p>
</div>
</body>
</html>