位置: IT常识 - 正文

学习CSS3,模拟春雪漫天飘的动画效果(css3的模块结构和应用)

编辑:rootadmin
学习CSS3,模拟春雪漫天飘的动画效果

推荐整理分享学习CSS3,模拟春雪漫天飘的动画效果(css3的模块结构和应用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css3的模块结构和应用,html模拟,css3技术简介,css3的模块结构和应用,html模拟,css3模板,css 模拟器,css 模拟器,内容如对您有帮助,希望把文章链接给更多的朋友!

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

目录

1. 实现思路

2. 部分HTML代码 

3. 夜空的背景 

4. 雪花的样式 

5. 粒子飞升效果 

6. HTML完整源代码 

7. CSS3完整源代码

8.  最后 


1. 实现思路DIV布局的使用整体背景radial-gradient属性的使用夜空rotate属性的使用雪花radial-gradient属性的使用雪花移动动画animation属性的使用雪花移动过程中translate3d属性的使用2. 部分HTML代码 学习CSS3,模拟春雪漫天飘的动画效果(css3的模块结构和应用)

因为雪花的元素是相同的,只是移动的起点,移动过程,移动的终点不同,所以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粉丝福利:订阅的粉丝可加微信,对文章的内容进行【一对一指导】!
本文链接地址:https://www.jiuchutong.com/zhishi/300268.html 转载请保留说明!

上一篇:关基系统防SSL证书断供,知道创宇“包办式”国密改造方案省心又安全

下一篇:JS实现数组去重的八种方法(实用)(js 数组去重的四种方法)

  • 抖音主页联系方式是怎样弄上去的(抖音主页联系方式在哪找到?)

    抖音主页联系方式是怎样弄上去的(抖音主页联系方式在哪找到?)

  • 三星note10电信卡不能打电话(三星note10 电信卡)

    三星note10电信卡不能打电话(三星note10 电信卡)

  • word怎么设置左右分栏(word怎么设置左右边距)

    word怎么设置左右分栏(word怎么设置左右边距)

  • airpods怎么看耳机电量(airpods2怎么看)

    airpods怎么看耳机电量(airpods2怎么看)

  • oppor15x有红外线遥控功能吗(oppor15红外线功能)

    oppor15x有红外线遥控功能吗(oppor15红外线功能)

  • p40pro充电器多少w(vivox70充电器多少w)

    p40pro充电器多少w(vivox70充电器多少w)

  • wps怎么空两格(wps怎么空两格一段都动了)

    wps怎么空两格(wps怎么空两格一段都动了)

  • 腾讯课堂直播回放多久生成(腾讯课堂直播回放过期怎么办)

    腾讯课堂直播回放多久生成(腾讯课堂直播回放过期怎么办)

  • 芒果tvpc端是什么意思(芒果tv pc端)

    芒果tvpc端是什么意思(芒果tv pc端)

  • 苹果7右侧发热严重(苹果7手机右边发烫)

    苹果7右侧发热严重(苹果7手机右边发烫)

  • 笔记本电脑字母键盘总是打出数字(笔记本电脑字母大小写怎么切换)

    笔记本电脑字母键盘总是打出数字(笔记本电脑字母大小写怎么切换)

  • tcpip与osi区别与联系(osi与tcpip的区别与联系)

    tcpip与osi区别与联系(osi与tcpip的区别与联系)

  • quiet boot什么意思(quiek boot)

    quiet boot什么意思(quiek boot)

  • 为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

    为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

  • 网购的下单备注在哪里(网购的下单备注是什么)

    网购的下单备注在哪里(网购的下单备注是什么)

  • wps表格怎么搜索内容(wps表格怎么搜索文档里面的内容)

    wps表格怎么搜索内容(wps表格怎么搜索文档里面的内容)

  • 如何设置微信自启动(如何设置微信自动清理的功能)

    如何设置微信自启动(如何设置微信自动清理的功能)

  • airpods有没有黑色(apple airpods有黑色的吗)

    airpods有没有黑色(apple airpods有黑色的吗)

  • 天猫小黑盒是什么东西(天猫小黑盒是什么模式)

    天猫小黑盒是什么东西(天猫小黑盒是什么模式)

  • 电脑蓝屏代码0x0000007f(电脑蓝屏代码0x0000007B)

    电脑蓝屏代码0x0000007f(电脑蓝屏代码0x0000007B)

  • 路由器id是啥意思(路由器的id是哪个)

    路由器id是啥意思(路由器的id是哪个)

  • 抖音为什么点赞失败(抖音为什么点赞了喜欢里面却不显示)

    抖音为什么点赞失败(抖音为什么点赞了喜欢里面却不显示)

  • app英文怎么变中文(app英文变中文)

    app英文怎么变中文(app英文变中文)

  • jpg格式图片怎么打开(jpg格式图片怎么打印出来)

    jpg格式图片怎么打开(jpg格式图片怎么打印出来)

  • Win7旗舰版系统下设置IE浏览器的安全级别的方法(win7旗舰版系统怎么样)

    Win7旗舰版系统下设置IE浏览器的安全级别的方法(win7旗舰版系统怎么样)

  • WordPress 置顶文章的3种方法(置顶文章)

    WordPress 置顶文章的3种方法(置顶文章)

  • 减免税流程
  • 机动车发票税率怎么算
  • 公司为员工报销的医药费
  • 同一家单位发票不一样
  • 高新技术认定研发费用要求
  • 应付账款坏账了怎么处理
  • 营改增建筑安装服务发票要求
  • 应交消费税通过什么科目核算
  • 航天金穗服务费抵扣
  • 增值税销项发票冲红怎么冲
  • 非独立核算的公司怎么报税
  • 文化事业建设税怎么申报
  • 所有的罚款都不能税前扣除吗
  • 哪些情况下不就地分摊缴纳企业所得税?
  • 电子发票二维码怎么下载
  • 破产报表日是哪一日
  • 固定资产投资成本的回收与实物更新
  • 工程施工纳税
  • 因腐败因素形成的损失企业所得税如何处理?
  • 餐厨垃圾处理有哪些设备
  • 附有销售退回条款的递延所得税问题
  • 固定资产质保金计入什么科目
  • win10右键个性化提示该文件没有与之关联
  • 无形资产入股注意事项
  • php二维数组遍历
  • 工程施工科目借贷方向
  • 增加办税人员需要带什么材料
  • 会计费用科目分类表
  • 转让土地使用权的条件是什么
  • 减免税款账务处理
  • 工业企业采购部工作职责
  • 2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!
  • 反向选择命令
  • 代付代缴社保会计分录
  • 民办幼儿园需要什么资质
  • python怎么生成随机矩阵
  • 软件开发费属于什么费用
  • 应收账款能想到什么
  • python id 函数
  • php网站修改
  • 看望员工现金属于什么费用
  • 哪些行业不用交税
  • 计提贷款准备金公式
  • sqlserver2008不存在或拒绝访问怎么办
  • 社保由税局代收马上开始
  • 金税四期一般纳税人开票先票后款行吗
  • 在非企业合并形成的长期股权投资中
  • 业务招待费专用会计科目
  • 资本公积现金流量表里放在哪里
  • 增资扩股对原股东的影响
  • 网吧出售
  • 在我国土地使用权分为哪几类
  • 机票的电子发票可以报销吗
  • 核定征收也需要报税务报表吗?
  • 残保金新公司第一年免费吗
  • 投资性房地产的范围
  • 私对公可以转账怎么转
  • 企业初建
  • 企业存货会计分录
  • 在SQL Server中使用存储过程的优点包括
  • centos7基本环境选哪个
  • win10打开cad出现致命错误
  • 在mac外置硬盘上安装软件
  • centos5.5加固
  • Windows RT 8.1 Update3(KB3033055)开始菜单多图欣赏
  • 如何使用朋友的山姆卡
  • cpu资源占用率计算原理
  • win10系统下怎么安装caxa2016电子图板 caxa2016电子图板安装详细图文教程
  • win7如何重装系统电脑
  • win8.1安装程序无法确定支持的安装选项
  • cocos2djs教程
  • 下面有关js中call和apply的描述,错误的是
  • javascript提交数据
  • Node.js中的construct构造函数
  • js实现滚动条
  • js调用css动画
  • javascript如何定义函数
  • 水资源税征收标准2022
  • 纳税服务理念创新不足
  • 美国税务人员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设