首页 前端知识 纯CSS实现超真实的动态云朵效果

纯CSS实现超真实的动态云朵效果

2024-07-02 23:07:47 前端知识 前端哥 73 708 我要收藏

纯CSS实现超真实的动态云朵效果

这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果。

  • 效果展示

在这里插入图片描述

  • 代码实现
    • 目录结构:
      在这里插入图片描述

    • HTML:

      <!doctype html>
      <html lang="zh">
      <!--
      author: ghp
      date: 2022/10/12
      description: 纯CSS实现的超真实的动态云朵效果
      -->
      <head>
      	<meta charset="UTF-8">
      	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>纯CSS3打造超真实的多层云彩动画特效</title>
      	<link rel="stylesheet" href="./css/cloud.css">
      </head>
      
      <body>
      	<div class="htmleaf-container">
      		<div class="sky">
      			<div class="clouds_one"></div>
      			<div class="clouds_two"></div>
      			<div class="clouds_three"></div>
      		</div>
      	</div>
      </body>
      
      </html>
      
    • CSS:

      html,
      body {
          margin: 0;
          height: 100%
      }
      
      .sky {
          height: 100vh;
          background: #007fd5;
          position: relative;
          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;
          animation: sky_background 50s ease-out infinite;
          -webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      
      .clouds_one {
          background: url("../img/cloud_one.png");
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 300%;
          -webkit-animation: cloud_one 50s linear infinite;
          -moz-animation: cloud_one 50s linear infinite;
          -o-animation: cloud_one 50s linear infinite;
          animation: cloud_one 50s linear infinite;
          -webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      
      .clouds_two {
          background: url("../img/cloud_two.png");
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 300%;
          -webkit-animation: cloud_two 75s linear infinite;
          -moz-animation: cloud_two 75s linear infinite;
          -o-animation: cloud_two 75s linear infinite;
          animation: cloud_two 75s linear infinite;
          -webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      
      .clouds_three {
          background: url("../img/cloud_three.png");
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 300%;
          -webkit-animation: cloud_three 100s linear infinite;
          -moz-animation: cloud_three 100s linear infinite;
          -o-animation: cloud_three 100s linear infinite;
          animation: cloud_three 100s linear infinite;
          -webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      
      @-webkit-keyframes sky_background {
          0% {
              background: #007fd5;
              color: #007fd5
          }
      
          50% {
              background: #000;
              color: #a3d9ff
          }
      
          100% {
              background: #007fd5;
              color: #007fd5
          }
      }
      
      @-moz-keyframes sky_background {
          0% {
              background: #007fd5;
              color: #007fd5
          }
      
          50% {
              background: #000;
              color: #a3d9ff
          }
      
          100% {
              background: #007fd5;
              color: #007fd5
          }
      }
      
      @keyframes sky_background {
          0% {
              background: #007fd5;
              color: #007fd5
          }
      
          50% {
              background: #000;
              color: #a3d9ff
          }
      
          100% {
              background: #007fd5;
              color: #007fd5
          }
      }
      
      @-webkit-keyframes cloud_one {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @-moz-keyframes cloud_one {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @keyframes cloud_one {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @-webkit-keyframes cloud_two {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @-moz-keyframes cloud_two {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @keyframes cloud_two {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @-webkit-keyframes cloud_three {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @-moz-keyframes cloud_three {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      
      @keyframes cloud_three {
          0% {
              left: 0
          }
      
          100% {
              left: -200%
          }
      }
      

附赠img图片:
在这里插入图片描述

cloud_one
cloud_three
cloud_two

PS: 如果对您有帮助,欢迎三连(关注💖、点赞👍、收藏⭐)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13805.html
标签
评论
发布的文章

sublime text的json快捷键

2024-07-30 22:07:35

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!