学习CSS3，模拟春雪漫天飘的动画效果

已于 2024-04-30 10:37:16 修改
阅读量2.5k 收藏 44
点赞数 37
分类专栏： CSS3动画特效 文章标签： css3 动画 前端
于 2023-04-04 11:00:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingyu_qie/article/details/129947000
版权

清明时节雨纷纷，但有些地方却下起了大雪，今天我们就用所学的CSS3知识，模拟一下夜晚漫天飘雪的场景吧。

目录

1. 实现思路

2. 部分HTML代码 

3. 夜空的背景 

4. 雪花的样式 

5. 粒子飞升效果 

6. HTML完整源代码 

7. CSS3完整源代码

8.  最后 

1. 实现思路

  • DIV布局的使用
  • 整体背景radial-gradient属性的使用
  • 夜空rotate属性的使用
  • 雪花radial-gradient属性的使用
  • 雪花移动动画animation属性的使用
  • 雪花移动过程中translate3d属性的使用

2. 部分HTML代码 

因为雪花的元素是相同的，只是移动的起点，移动过程，移动的终点不同，所以HTML元素大致相同，这里我们就不把所有的元素都粘贴过来了，稍后会粘贴出所有源代码，你可以拿到源代码放到自己的网页里，即可看到漫天飘雪的场景啦。

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  ......
  <!-- 此处重复此处越多，效果越好 -->
</div>

3. 夜空的背景 

夜空为了绚烂一些，肯定不是能是纯黑色，需要做一定的过渡效果，雪花飘落才会更完美，这里用到了background-image: radial-gradient  等CSS属性

body {
  background-image: radial-gradient(#021027, #000000);
}

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);
}

4. 雪花的样式 

雪花虽然HTML元素相同，但表现形式却不同。他有自己的大小，明暗，移动轨迹，等等，越随机，才能越表现的真实而完美

.circle-container .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}

@-webkit-keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}

5. 粒子飞升效果 

可能在第3步，大家看到了 transform: rotate(180deg); 的代码设置，这是做了另外的考虑。满天飞雪的场景，其实如果旋转屏幕，可以做为那种地面上有某种粒子，逐渐向上飞升的效果，也是非常棒的。喜欢的小伙伴可以试一下。

6. HTML完整源代码 

下面把完整源代码放出来，需要的小伙伴可以直接COPY过去，放到自己网页上就可以看到满天飞雪的效果啦

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>漫天飘雪</title>

<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>


</body></html>

7. CSS3完整源代码

html,
body {
  width: 100%;
  height: 100%;
  padding:0;margin:0;
}

body {
  background-image: radial-gradient(#021027, #000000);
}

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);
}

.circle-container {
  position: absolute;
  -webkit-transform: translateY(-10vh);
          transform: translateY(-10vh);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.circle-container .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}

@-webkit-keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}
@keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}
.circle-container:nth-child(1) {
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-1;
          animation-name: move-frames-1;
  -webkit-animation-duration: 8441ms;
          animation-duration: 8441ms;
  -webkit-animation-delay: 4544ms;
          animation-delay: 4544ms;
}
@-webkit-keyframes move-frames-1 {
  from {
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  }
  to {
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  }
}
@keyframes move-frames-1 {
  from {
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  }
  to {
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  }
}
.circle-container:nth-child(1) .circle {
  -webkit-animation-delay: 3734ms;
          animation-delay: 3734ms;
}
.circle-container:nth-child(2) {
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-2;
          animation-name: move-frames-2;
  -webkit-animation-duration: 9921ms;
          animation-duration: 9921ms;
  -webkit-animation-delay: 5982ms;
          animation-delay: 5982ms;
}
@-webkit-keyframes move-frames-2 {
  from {
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  }
}
@keyframes move-frames-2 {
  from {
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  }
}
.circle-container:nth-child(2) .circle {
  -webkit-animation-delay: 2516ms;
          animation-delay: 2516ms;
}
.circle-container:nth-child(3) {
  width: 3px;
  height: 3px;
  -webkit-animation-name: move-frames-3;
          animation-name: move-frames-3;
  -webkit-animation-duration: 10427ms;
          animation-duration: 10427ms;
  -webkit-animation-delay: 3649ms;
          animation-delay: 3649ms;
}
@-webkit-keyframes move-frames-3 {
  from {
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  }
}
@keyframes move-frames-3 {
  from {
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  }
}
.circle-container:nth-child(3) .circle {
  -webkit-animation-delay: 731ms;
          animation-delay: 731ms;
}
.circle-container:nth-child(4) {
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-4;
          animation-name: move-frames-4;
  -webkit-animation-duration: 10951ms;
          animation-duration: 10951ms;
  -webkit-animation-delay: 8909ms;
          animation-delay: 8909ms;
}
@-webkit-keyframes move-frames-4 {
  from {
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  }
  to {
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  }
}
@keyframes move-frames-4 {
  from {
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  }
  to {
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  }
}
.circle-container:nth-child(4) .circle {
  -webkit-animation-delay: 2526ms;
          animation-delay: 2526ms;
}
.circle-container:nth-child(5) {
  width: 5px;
  height: 5px;
  -webkit-animation-name: move-frames-5;
          animation-name: move-frames-5;
  -webkit-animation-duration: 7642ms;
          animation-duration: 7642ms;
  -webkit-animation-delay: 2502ms;
          animation-delay: 2502ms;
}
@-webkit-keyframes move-frames-5 {
  from {
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  }
}
@keyframes move-frames-5 {
  from {
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  }
}
.circle-container:nth-child(5) .circle {
  -webkit-animation-delay: 2755ms;
          animation-delay: 2755ms;
}
.circle-container:nth-child(6) {
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-6;
          animation-name: move-frames-6;
  -webkit-animation-duration: 8439ms;
          animation-duration: 8439ms;
  -webkit-animation-delay: 455ms;
          animation-delay: 455ms;
}
@-webkit-keyframes move-frames-6 {
  from {
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  }
}
@keyframes move-frames-6 {
  from {
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  }
}
.circle-container:nth-child(6) .circle {
  -webkit-animation-delay: 3506ms;
          animation-delay: 3506ms;
}
.circle-container:nth-child(7) {
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-7;
          animation-name: move-frames-7;
  -webkit-animation-duration: 7539ms;
          animation-duration: 7539ms;
  -webkit-animation-delay: 3595ms;
          animation-delay: 3595ms;
}
@-webkit-keyframes move-frames-7 {
  from {
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  }
}
@keyframes move-frames-7 {
  from {
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  }
}
.circle-container:nth-child(7) .circle {
  -webkit-animation-delay: 749ms;
          animation-delay: 749ms;
}
.circle-container:nth-child(8) {
  width: 4px;
  height: 4px;
  -webkit-animation-name: move-frames-8;
          animation-name: move-frames-8;
  -webkit-animation-duration: 7480ms;
          animation-duration: 7480ms;
  -webkit-animation-delay: 2680ms;
          animation-delay: 2680ms;
}
@-webkit-keyframes move-frames-8 {
  from {
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  }
}
@keyframes move-frames-8 {
  from {
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  }
}
.circle-container:nth-child(8) .circle {
  -webkit-animation-delay: 1888ms;
          animation-delay: 1888ms;
}
.circle-container:nth-child(9) {
  width: 2px;
  height: 2px;
  -webkit-animation-name: move-frames-9;
          animation-name: move-frames-9;
  -webkit-animation-duration: 9087ms;
          animation-duration: 9087ms;
  -webkit-animation-delay: 9461ms;
          animation-delay: 9461ms;
}
@-webkit-keyframes move-frames-9 {
  from {
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  }
}
@keyframes move-frames-9 {
  from {
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  }
}
.circle-container:nth-child(9) .circle {
  -webkit-animation-delay: 1721ms;
          animation-delay: 1721ms;
}
.circle-container:nth-child(10) {
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-10;
          animation-name: move-frames-10;
  -webkit-animation-duration: 9860ms;
          animation-duration: 9860ms;
  -webkit-animation-delay: 8969ms;
          animation-delay: 8969ms;
}
@-webkit-keyframes move-frames-10 {
  from {
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  }
}
@keyframes move-frames-10 {
  from {
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  }
}
.circle-container:nth-child(10) .circle {
  -webkit-animation-delay: 1801ms;
          animation-delay: 1801ms;
}
.circle-container:nth-child(11) {
  width: 1px;
  height: 1px;
  -webkit-animation-name: move-frames-11;
          animation-name: move-frames-11;
  -webkit-animation-duration: 9292ms;
          animation-duration: 9292ms;
  -webkit-animation-delay: 9812ms;
          animation-delay: 9812ms;
}

8.  最后 

最后呢，祝大家2023年心想事成

  • 【手把手、从零到一】SpringBoot+SpringCloud+Vue前后端分离实战项目，专栏持续火热更新中。。。
  • 主流技术，细节到位，前后端由两位【十年多】的高级架构师操刀
  • 作为毕设项目、入门项目、或者准备进阶提升竞争力的小伙伴，可以【订阅本专栏】哦
  • 前端部分 ：https://blog.csdn.net/xingyu_qie/category_12222258.html
  • 服务端部分 ：https://blog.csdn.net/scm_2008/category_12236048.html
  • 粉丝福利：订阅的粉丝可加微信，对文章的内容进行【一对一指导】！

经海路大白狗
关注
  • 37
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 60
    评论
专栏目录
透明白点雪花CSS3特效
04-06
透明白点雪花CSS3特效是一款css3基于keyframes制作白色透明的颗粒状雪花掉落网页背景动画特效。
CSS3雪花粒子下雪动画特效
07-24
CSS3雪花粒子下雪动画特效是一款刷新网页随机生成雪花动画特效。
canvas下雪背景 html+css+js
你好呀，很高兴你在看这里~
03-22 3649
先看效果： 实现： 1. 定义标签： <h1>北极光之夜。</h1> <div class="bg"></div> <canvas id="canvas"></canvas> h1是标题，.bg是背景图，canvas是画布。 2. 开始js部分，先获取画布： var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2
用HTML、CSS和JS打造绚丽的雪花飘落效果
@HNUSTer的博客
02-16 2365
这段代码实现了一个简单的下雪效果。通过HTML、CSS和JavaScript实现了在页面上模拟雪花飘落的效果。代码中通过创建多个雪花元素，并设置它们的初始位置、大小和下落速度，然后利用定时器实现了雪花逐渐向下飘落的动画效果。当雪花超出屏幕底部或右侧时，会重新回到天上开始往下飘落，从而营造出不断飘落的雪花效果。
Autotools Makefile学习笔记
雪夜的博客
10-14 395
Autotools Makefile 学习笔记查看工具软件目录结构FlatShallowDeepAutotools自动创建Makefile流程使用autoscan扫描项目工程生成配置脚本configure将生成的configure.scan文件修改成configure.in(老版本)或configure.ac(新版本)修改configure.ac文件使用aclocal生成aclocal.m4文件使用autoconf生成配置脚本生成Makefile的通用规则文件Makefile.in手工编写Makefile.
一份【超级全面】的前端工程师的自检清单
小生方勤
10-16 443
开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的...
java学习（六）——CSS
MAK_SL的博客
04-22 113
CSS3入门 1. 概述 如何学习： CSS是什么 CSS怎么用（快速入门） CSS选择器（重点+难点） 美化网页（文字，阴影，超链接，列表，渐变…） 盒子模型 浮动 定位 网页动画（特效）菜鸟教程 1.1 什么是CSS？ Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体、颜色、边距、浮动、背景图片 1.2 快速入门 style 基本入门 <!DOCTYPE html> <html lang="en"> <head>
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6161
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
纯css实现满屏雪花飘落效果
茂茂的博客
05-06 935
这里使用了关键帧动画（keyframes animation），其中定义了一个名为"snow"的动画，以及一个"-webkit-snow"的动画（兼容WebKit内核的浏览器）。这两个动画使用相同的规则：通过改变背景图片的位置，模拟雪花从天上落下的效果。其中，初始位置为0 0，终止位置为500px 1000px和500px 500px。该元素的背景使用两张图片，即"snow1.png"和"snow2.png"。这段代码定义了一个名为"snow"的CSS样式，该样式将被应用于某个HTML元素上。
前端特效——复杂下雪，雪花纷飞（纯css)
坐等夕阳落time的博客
07-26 3612
前端特效——复杂下雪，雪花纷飞（纯css)
用JavaScript实现网页雪花飘落特效
weixin_47202652的博客
12-30 2597
用JavaScript实现网页雪花飘落特效
css实现下雪效果 （快圣诞啦）
一枚小趴菜(´▽`)ﾉ
12-17 3074
仅用css就能完成雪花效果~雪花飘飘~~
CSS：雪花飘落特效
03-17
CSS代码实现的雪花飘落项目，雪花自动下落，在底端积累。
css3模拟雷达波向外散发动画效果
06-12
描述： ... 所以呢，html5+css3效果离我们生活已经越来越近了 ... 今天给大家推荐一款非常舒适，且只使用css3实现的效果，无js 使用方法： 1、将附件index.html文件中的css代码以及html代码拷贝到你的网页中即可
纯CSS3模拟摩天轮旋转动画效果.zip
07-11
纯CSS3模拟摩天轮旋转动画效果
jquery+CSS3模拟Path2.0动画菜单效果代码
10-23
主要介绍了jquery+CSS3模拟Path2.0动画菜单效果代码,涉及jquery鼠标click点击事件及页面元素样式动态变换的实现技巧,需要的朋友可以参考下
CSS3漫天星空下日食动画特效
07-24
CSS3漫天星空下日食动画特效是一款简单的星空月亮动画场景特效。
纯CSS3模拟摩天轮旋转动画效果特效代码
03-20
效果描述： 这是用纯CSS3实现的一个旋转动画效果，模拟游乐场里的摩天轮旋转动画效果 效果逼真好用 使用方法： 1、引入css样式 2、将index.html中的代码部分拷贝过去即可
【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件
最新发布
m0_49471668的博客
04-29 455
【代码】【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件。
html 下拉动画,CSS3模拟动画下拉菜单效果
05-27
下面是一个使用 CSS3 实现的下拉菜单动画效果示例： HTML 代码： ```html 下拉菜单 菜单项1 菜单项2 菜单项3 ``` CSS 代码： ```css /* 下拉菜单按钮样式 */ .dropbtn { background-color: #4CAF50; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 60
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值