css3实现云彩动画

##css3实现云彩动画所需的知识:

定位
- 固定定位position: fixed
- 相对定位position: relative
- 绝对定位position: absolute
- 静态定位position: static
背景
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
- background-origin
- background-clip
- background-size
动画
- animation-name
- animation-duration
- animation-delay
- animation-timing-function
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
溢出隐藏
- overflow:hidden
兼容性
- 浏览器私有前缀。主要是浏览器对于新CSS属性的一个提前支持
  如果对上面所列出的知识,不太清楚的话,可以点击上面链接,查看更多信息,了解知识,我上面列出来的在css实现云彩动画不是全部要使用到,我只是方便自己回忆学过的知识而已
  废话少说,上效果图
  因为图片的大小超过了5M,上传不了
  效果图(直接通过下载源代码直接查看)&图片素材&源代码在下面的百度网盘链接
  https://pan.baidu.com/s/1DZQ3LZz4EyzJEc3zvZNi2A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css实现云彩动画</title>
    <style>
        html,
        body{
            /* 样式初始化 */
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .sky{
            /* 相对定位 */
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #007fd5;
            overflow: hidden;/* 溢出隐藏 */
            -webkit-animation: sky_background 50s ease-out infinite;
            -moz-animation: sky_background 50s ease-out infinite;
            -o-animation: sky_background 50s ease-out infinite;
            -ms-animation: sky_background 50s ease-out infinite;
            animation: sky_background 50s ease-out infinite;
        }
        /* 样式复用性 */
        .sky .cloud{
            position: absolute;
            top: 0;
            left: 0;
            width: 300%;
            height: 100%;
            background-image: url("./images/cloud_one.png");
        }
        .sky .cloud_one{
            background-image: url("./images/cloud_one.png");
            -webkit-animation: cloud_float 50s linear infinite;
            -moz-animation: cloud_float 50s linear infinite;
            -o-animation: cloud_float 50s linear infinite;
            -ms-animation: cloud_float 50s linear infinite;
            animation: cloud_float 50s linear infinite;
        }
        .sky .cloud_two{
            background-image: url("./images/cloud_two.png");
            -webkit-animation: cloud_float 75s linear infinite;
            -moz-animation: cloud_float 75s linear infinite;
            -o-animation: cloud_float 75s linear infinite;
            -ms-animation: cloud_float 75s linear infinite;
            animation: cloud_float 75s linear infinite;/* 岔开时间 */
        }
        .sky .cloud_three{
            background-image: url("./images/cloud_three.png");
            -webkit-animation: cloud_float 100s linear infinite;
            -moz-animation: cloud_float 100s linear infinite;
            -o-animation: cloud_float 100s linear infinite;
            -ms-animation: cloud_float 100s linear infinite;
            animation: cloud_float 100s linear infinite;
        }
        @keyframes sky_background{
            0%{
                background-color: #007fd5;
            }
            50%{
                background-color: #000;
            }
            100%{
                background-color: #007fd5;
            }
        }
        @keyframes cloud_float{
            0%{
                left: 0%;
            }
            100%{
                left: -200%;
            }
        }
    </style>
</head>
<body>
    <div class="sky">
        <div class="cloud cloud_one"></div>
        <div class="cloud cloud_two"></div>
        <div class="cloud cloud_three"></div>
    </div>
    <!-- 
        思路:
        1. html布局
        2. 添加css样式(从外到内)
        3. 关键帧
        4. 使用动画
    -->
</body>
</html>

猜你喜欢