【css】实现个蓝天白云效果

最新推荐文章于 2022-07-24 10:52:09 发布

业火之理

最新推荐文章于 2022-07-24 10:52:09 发布

阅读量988

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/yehuozhili/article/details/102960342

版权

css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

背景

第一次看见这个效果感觉真的很惊艳，要来代码研究发现就是3图片移动而已。
其中他们把3朵云translate3d，我感觉其实没必要。我自己写的跟他们效果一样的。

主要收获

切图真的是太重要了，图切的好，看起来效果就牛b，特别是png这种透明图。
还有收获就是复习了下animation几个属性：标识符，动画持续时间，时间方程效果，延迟时间，次数，方向，位置。

代码

<!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>Document</title>
</head>
<body>
    <div class="sky">
        <div class="cloud_one"></div>
        <div class="cloud_two"></div>
        <div class="cloud_three"></div>
    </div>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .sky{
            height: 500px;
            width:100%;
            position: relative;
            animation: sky_background 50s ease-out 0s infinite normal none;
            overflow: hidden;
        }
        .cloud_one{
            background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_one.png') repeat-x;
            position: absolute;
            height: 100%;
            width:300%;
            left: 0;
            top:0;
            animation: cloudOne 50s linear 0s infinite normal none;
        }
        .cloud_two{
            background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_two.png');
            position: absolute;
            height: 100%;
            width:300%;
            left: 0;
            top:0;
            animation: cloudTwo 50s linear 0s infinite normal none;
        }
        .cloud_three{
            background: url('http://demo.lanrenzhijia.com/2016/cloud1111/images/cloud_three.png');
            position: absolute;
            height: 100%;
            width:300%;
            left: 0;
            top:0;
            animation: cloudThree 50s linear 0s infinite normal none;
        }
        @keyframes sky_background {
            0% {
                background: #007fd5;
                color: #007fd5
            }

            50% {
                background: #000;
                color: #a3d9ff
            }

            100% {
                background: #007fd5;
                color: #007fd5
            }
        }
        @keyframes cloudOne {
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-20%);;
            }
        }
        @keyframes cloudTwo {
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-40%);;
            }
        }
        @keyframes cloudThree {
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-60%);;
            }
        }

    </style>
</body>
</html>

业火之理

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
【css】实现个蓝天白云效果

背景第一次看见这个效果感觉真的很惊艳，要来代码研究发现就是3图片移动而已。其中他们把3朵云translate3d，我感觉其实没必要。我自己写的跟他们效果一样的。主要收获切图真的是太重要了，图切的好，看起来效果就牛b，特别是png这种透明图。还有收获就是复习了下animation几个属性：标识符，动画持续时间，时间方程效果，延迟时间，次数，方向，位置。代码<!DOCTYP...
复制链接

扫一扫