首页html黑色背景粉色樱花雨源码

html黑色背景粉色樱花雨源码

时间: 2023-06-18 15:03:04 浏览: 113

浪漫樱花雨代码html

浪漫樱花雨代码html 文章：https://blog.csdn.net/2301_76706775/article/details/129770540?spm=1001.2014.3001.5502 仔细看哦！！！资源免费！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！免费资源，好东西一起分享

以下是一个简单的HTML代码，可以实现黑色背景粉色樱花雨效果： ``` <!DOCTYPE html> <html> <head> <title>樱花雨效果</title> <style> body { background-color: black; background-image: url("https://i.imgur.com/5cYt6Ji.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; } .sakura { position: absolute; display: block; background-image: url("https://i.imgur.com/6mB9JiD.png"); background-repeat: no-repeat; background-size: contain; width: 30px; height: 30px; opacity: 0.9; animation: sakura 6s linear infinite; } @keyframes sakura { 0% { transform: translate(0, -100%); } 100% { transform: translate(100vw, 100vh); } } </style> </head> <body>  <script> for (var i = 0; i < 100; i++) { var sakura = document.createElement("div"); sakura.setAttribute("class", "sakura"); sakura.style.top = Math.random() * 100 + "%"; sakura.style.left = Math.random() * 100 + "%"; sakura.style.animationDelay = Math.random() * 6 + "s"; document.body.appendChild(sakura); } </script> </body> </html> ``` 代码中，我们使用了一个黑色背景图片作为页面的背景，并使用了粉色樱花图片作为雨滴的图案，通过添加`<div>`元素并设置`position`属性为`absolute`，我们可以将樱花的位置设置为随机的，通过`animation`属性，我们可以让樱花在页面上以一定的速度移动，形成雨滴的效果。

阅读全文