css实现雪花背景图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background: #050505; } .grain{ width: 300%; height: 300%; animation: grain 6s steps(10) infinite; background-image: url("./grain.png"); background-repeat: repeat; will-change: transform; position: fixed; top: -100%; left: -100%; z-index: 1; opacity: 0.1; } @keyframes grain{ 0%{transform: translate(20%,-15%);} 10%{transform: translate(-20%,-15%);} 20%{transform: translate(20%,-5%);} 30%{transform: translate(-20%,-5%);} 40%{transform: translate(20%,5%);} 50%{transform: translate(-20%,5%);} 60%{transform: translate(20%,15%);} 70%{transform: translate(-20%,15%);} 80%{transform: translate(20%,5%);} 90%{transform: translate(-20%,5%);} 100%{transform: translate(20%,-5%);} } </style> </head> <body> <div class="grain "></div> </body> </html>代码图片地址 效果如图第一眼看上去其实感觉就是黑不溜秋的背景图，其实仔细看是有一些细微的白点抖动，用来做网页背景还是很有意思的
