01-纯css打造云端仙境

最新推荐文章于 2023-10-12 21:16:39 发布

不及你笑靥如花

最新推荐文章于 2023-10-12 21:16:39 发布

阅读量225

点赞数

分类专栏： css动画特效文章标签： html css3

本文链接：https://blog.csdn.net/qq_43775721/article/details/113520749

版权

css动画特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这款云端动画效果，主要css3动画和css变量打造而成。css3使云朵移动，css变量给云朵造成移动速度的不同。代码免费下载地址，具体解释步骤如下。（喜欢的话就点赞收藏奥）
在这里插入图片描述

步骤一：先把body部分的代码完成（把透明的云朵图片放入body中），并且设置下变量–i(为云朵不同移动速度准备)。

<body>
    <div class="clouds">
        <img src="./images/cloud1.png" style="--i:1" alt="">
        <img src="./images/cloud2.png" style="--i:2" alt="">
        <img src="./images/cloud3.png" style="--i:3" alt="">
        <img src="./images/cloud4.png" style="--i:4" alt="">
        <img src="./images/cloud5.png" style="--i:5" alt="">
    </div>
</body>

步骤二：对body部分进行布局，给body添加背景，并且使div[class=clouds]大小布满屏幕，最后云朵的图片利用绝对定位放置在div[class=clouds]的底部（使图片看起来更加仙气）。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        width: 100vw;
        height: 100vh;
        background: url(./images/2d-bg.jpg) no-repeat;
        background-size: cover;
        background-position: top;
        overflow: hidden;
    }
    
    .clouds {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
    }
    
    .clouds img {
        position: absolute;
        bottom: 0;
        max-width: 100%;
        transform: scaleY(2);
    }

步骤三（重点）：利用css动画给云朵图片添加移动效果（改变云朵图片的X轴位移），在利用var(–i)获取body部分i的值，然后利用calc（8s*var(–i)）计算出不同云朵动画完成的时间（达到云朵的移动速度不同。）
补充：不了解css变量的点击这里！！！

  .clouds img {
        position: absolute;
        bottom: 0;
        max-width: 100%;
        animation: animate calc(8s*var(--i)) linear infinite;
        transform: scaleY(2);
    }
    
    @keyframes animate {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

不及你笑靥如花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-纯css打造云端仙境

这款云端动画效果，主要css3动画和css变量打造而成。css3使云朵移动，css变量给云朵造成移动速度的不同。代码免费下载地址，具体解释步骤如下。（喜欢的话就点赞收藏奥）步骤一：先把body部分的代码完成（把透明的云朵图片放入body中），并且设置下变量–i(为云朵不同移动速度准备)。<body> <div class="clouds"> <img src="./images/cloud1.png" style="--i:1" alt=""&gt
复制链接

扫一扫