效果图:
代码:
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>