前端学习（四）----CSS二维环境之过渡和动画

小天才阿展

已于 2022-03-16 12:04:25 修改

阅读量333

点赞数

文章标签：学习 css3 html5 前端

于 2022-03-16 10:46:27 首次发布

本文链接：https://blog.csdn.net/m0_63057828/article/details/123513578

版权

学习目标：

学会二维环境下移动动画属性

小案例：跳动的乐符代码实现

学习时间：

学习产出：

过渡

<!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 {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            transform: translateX(0px);
            /* 过渡的属性 */
            /* transition-property: all; */
            /* 过渡的时间 */
            /* transition-duration: 3s; */
            /* 过渡的速度时间曲线 */
            /* transition-timing-function: linear; */
            /* 默认值为ease慢速开始，然后变快，然后慢速结束
            linear匀速 */
            /* 延迟 */
            /* transition-delay: 1s; */
            /* 几秒后开始 */
            /* 综合写法属性 时间 速度时间曲线 延迟 */
            transition: all 1s linear 1s;
        }
        
        div:hover {
            height: 300px;
            transform: translateX(150px);
        }
    </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>
        .d1 {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            /* 动画名称
            animation-name: az;
            动画持续时间
            animation-duration: 5s;
            动画时间曲线
            animation-timing-function: linear;
            动画次数 无限次
            animation-iteration-count: infinite;
 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: az 5s linear;
        }
        /* 调用动画 */
        
        @keyframes az {
            0% {
                transform: translateX(0px);
            }
            25% {
                transform: translateX(50px);
            }
            60% {
                transform: translateX(150px);
            }
            100% {
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <div class="d1"></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>
        .music_dance {
            width: 1000px;
            height: 1000px;
            background-color: aquamarine;
            position: relative;
            transform: rotate(180deg);
        }
        
        .d1,
        .d2,
        .d3,
        .d4,
        .d5 {
            width: 50px;
            height: 50px;
            background: linear-gradient(to bottom, skyblue, bisque, palegreen);
        }
        
        .d1 {
            position: absolute;
            top: 300px;
            left: 500px;
            animation: d1 2s linear;
            animation-iteration-count: infinite;
        }
        
        .d2 {
            position: absolute;
            top: 300px;
            left: 550px;
            animation: d2 1s ease;
            animation-iteration-count: infinite;
        }
        
        .d3 {
            position: absolute;
            top: 300px;
            left: 600px;
            animation: d3 2s ease;
            animation-iteration-count: infinite;
        }
        
        .d4 {
            position: absolute;
            top: 300px;
            left: 650px;
            animation: d4 2s linear;
            animation-iteration-count: infinite;
        }
        
        .d5 {
            position: absolute;
            top: 300px;
            left: 700px;
            animation: d5 2s ease;
            animation-iteration-count: infinite;
        }
        
        @keyframes d1 {
            0% {
                height: 200px;
            }
            20% {
                height: 300px;
            }
            40% {
                height: 0px;
            }
            60% {
                height: 200px;
            }
            80% {
                height: 400px;
            }
            100% {
                height: 200px;
            }
        }
        
        @keyframes d2 {
            0% {
                height: 100px;
            }
            20% {
                height: 200px;
            }
            40% {
                height: 400px;
            }
            60% {
                height: 100px;
            }
            80% {
                height: 300px;
            }
            100% {
                height: 100px;
            }
        }
        
        @keyframes d3 {
            0% {
                height: 50px;
            }
            20% {
                height: 0px;
            }
            40% {
                height: 300px;
            }
            60% {
                height: 200px;
            }
            80% {
                height: 250px;
            }
            100% {
                height: 350px;
            }
        }
        
        @keyframes d4 {
            0% {
                height: 400px;
            }
            20% {
                height: 200px;
            }
            40% {
                height: 88px;
            }
            60% {
                height: 180px;
            }
            80% {
                height: 330px;
            }
            100% {
                height: 421px;
            }
        }
        
        @keyframes d5 {
            0% {
                height: 10px;
            }
            20% {
                height: 99px;
            }
            40% {
                height: 321px;
            }
            60% {
                height: 466px;
            }
            80% {
                height: 288px;
            }
            100% {
                height: 200px;
            }
        }
    </style>
</head>

<body>
    <div class="music_dance">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
        <div class="d5"></div>
    </div>
</body>

</html>

小天才阿展

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习（四）----CSS二维环境之过渡和动画

学习目标：学会二维环境下移动动画属性小案例：跳动的乐符代码实现学习时间：1h学习产出：过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
复制链接

扫一扫