HTML+CSS雪花飘飘

效果图：

代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>雪花飘飘</title>
</head>
<body><div class="eadr"><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div><div class="xuehua"><div class="cir"></div></div></div>
</body>
</html>

CSS部分

<style>html,body {width: 100%;height: 100%;padding: 0;margin: 0;}body {background-image: radial-gradient(#000000, #000000);}.eadr {width: 100%;height: 100%;overflow: hidden;transform: rotate(180deg);}.xuehua {position: absolute;-webkit-transform: translateY(-20vh);transform: translateY(-20vh);-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation-timing-function: linear;}.xuehua .cir {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);}}.xuehua: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);}}.xuehua:nth-child(1) .cir {-webkit-animation-delay: 3734ms;animation-delay: 3734ms;}.xuehua: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);}}.xuehua:nth-child(2) .cir {-webkit-animation-delay: 2516ms;animation-delay: 2516ms;}.xuehua: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);}}.xuehua:nth-child(3) .cir {-webkit-animation-delay: 731ms;animation-delay: 731ms;}.xuehua: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);}}.xuehua:nth-child(4) .cir {-webkit-animation-delay: 2526ms;animation-delay: 2526ms;}.xuehua: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);}}.xuehua:nth-child(5) .cir {-webkit-animation-delay: 2755ms;animation-delay: 2755ms;}.xuehua: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);}}.xuehua:nth-child(6) .cir {-webkit-animation-delay: 3506ms;animation-delay: 3506ms;}.xuehua: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);}}.xuehua:nth-child(7) .cir {-webkit-animation-delay: 749ms;animation-delay: 749ms;}.xuehua: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);}}.xuehua:nth-child(8) .cir {-webkit-animation-delay: 1888ms;animation-delay: 1888ms;}.xuehua: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);}}.xuehua:nth-child(9) .cir {-webkit-animation-delay: 1721ms;animation-delay: 1721ms;}.xuehua: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);}}.xuehua:nth-child(10) .cir {-webkit-animation-delay: 1801ms;animation-delay: 1801ms;}.xuehua: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;}
</style>

HTML+CSS雪花飘飘相关推荐

CSS3 HTML5下雪特效雪花飘飘
<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> < ...
怎么把 html做成雪花特效,CSS3 HTML5下雪特效雪花飘飘
CSS3 HTML5下雪特效雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...
圣诞树的雪花飘飘（结尾附源码）
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
《IOS疯狂讲义》雪花飘飘效果实现
最近在看<IOS疯狂讲义>这本书,看到最后里面有一个关于利用绘图和坐标变换实现雪花飘飘的效果,有点感兴趣,就按照书中的代码敲了一下,但是出来的效果和书中所说不太一样.所以把代码贴出来希望和 ...
html的css雪花动效,《前端每日实战》第171号作品：用纯 CSS 绘制一朵美丽的雪花...
昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一.效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 二.源代码下载每日 ...
2023跨年烟花（浪漫烟花+自定义音乐+雪花飘飘+自定义文字）
效果介绍可以自定义跨年文字可自定义更换背景音乐具有雪花效果项目文件index.html.gameCanvas-4.0.js.script.js index.html文件 <!DOCTY ...
2023跨年烟花（浪漫烟花+美妙音乐+雪花飘飘）含前端源码直接下载---系列最终篇
2023年快要到来啦,很高兴这次我们又能一起度过~ 特辑最终篇!!! 视觉中国目录一.前言二.跨年烟花三.效果展示四.详细介绍五.编码实现 index.html js 六.获取代码需要 ...
雪花css样式,css雪花动画
效果图: HTML的结构如下,创建10个雪花元素. 其实三四个元素也可以.元素越多雪花越多,雪花的速度不一样,会显得更有层次感. 一朵雪花首先,我们先写一朵雪花,并设为绝对定位..snow { po ...
制作网页雪花飘飘效果
<SCRIPT language=JavaScript1.2> var snowsrc="image/1.png" var no = 11;//雪花数量var ns4u ...

HTML+CSS雪花飘飘

HTML+CSS雪花飘飘相关推荐

最新文章

热门文章