HTML+CSS每周一练——简单下雪动画

最新推荐文章于 2023-08-08 12:27:29 发布

YuWo_lh

最新推荐文章于 2023-08-08 12:27:29 发布

阅读量309

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/YuWo_lh/article/details/128163559

版权

本文通过HTML和CSS创建了一个简单的下雪动画效果。在CSS中，利用transform-origin属性将转换原点设置在底部，结合缩放动画，模拟雪花从天空飘落并融化在地面的过程。文章分为HTML结构和CSS样式两部分进行详细讲解，并展示了最终的动画效果。

摘要由CSDN通过智能技术生成

老样子，先上效果图

一、HTML

<div class="container">

      <div class="cloud">

      </div>

   </div>

二、CSS

/* 常规初始化 */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   /* 水平垂直居中 */
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 100vh;
   background-color: #d3f1f1;
}

/* 云朵 */
.cloud {
   position: relative;
   width: 400px;
   height: 110px;
   background-color: #fff;
   border-radius: 50px;
}

/* 使用伪元素加盒子阴影在云朵上面加两个圆 */
.cloud::before {
   position: absolute;
   top: -65%;
   left: 38%;
   content: '';
   width: 180px;
   height: 180px;
   border-radius: 50%;
   background-color: #fff;

   /* 盒