| - | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | <head> |
| | <style> |
| | * { |
| | margin: 0px; |
| | padding: 0px; |
| | } |
| | #div_raindrops { |
| | position: fixed; |
| | width: 100%; /* 将宽度设置为100%以填充整个页面 */ |
| | height: 100vh; /* 使用视窗高度作为高度值 */ |
| | /*border: 1px #0a0a0a solid;*/ |
| | background-color: lightblue; |
| | overflow: hidden; |
| | background-image: url('rain.jpg'); |
| | background-size: cover; /* 让背景图片自适应填满整个容器 */ |
| | background-repeat: no-repeat; /* 防止重复显示 */ |
| | } |
| | .content { |
| | position: fixed; |
| | left: 250px; |
| | top:300px; |
| | width: 300px; /* 将宽度设置为100%以填充整个页面 */ |
| | height: 100px; |
| | /* 添加动画效果 */ |
| | animation: contentAnimation 2s infinite; |
| | animation-iteration-count: 1; |
| | } |
| | @keyframes contentAnimation { |
| | 0% { |
| | transform: translateY(-300px); |
| | opacity: 0; |
| | } |
| | 100% { |
| | transform: translateY(0); |
| | opacity: 1; |
| | } |
| | } |
| | .raindrops_item { |
| | position: absolute; |
| | width: 5px; |
| | height: 15px; |
| | border-radius: 80%; |
| | transform: translateY(-200px); |
| | background-color: gray; |
| | animation-name: raindrops; |
| | animation-duration:3s; |
| | animation-iteration-count: infinite; |
| | } |
| | @keyframes raindrops { |
| | 0% { transform: translateY(0) scale(1); opacity: 1; } |
| | 20% { transform: translateY(calc(100vh - 300px)) scale(1); opacity: 1; } |
| | /*5% { transform: translate(5vw, 100vh); opacity: 1; }*/ |
| | /* 10% { transform: translate(10vw, 100vh); opacity: 1; }*/ |
| | 20% { transform: translateY(100vh) scale(1); opacity: 1; } |
| | 30% { transform: translateY(calc(100vh - 140px)) scale(1); opacity: 1; } |
| | 50% { transform: translateY(100vh) scale(0.8); opacity: 1; } |
| | 60% { transform: translateY(calc(100vh - 70px)) scale(0.8); opacity: 1; } |
| | 70% { transform: translateY(100vh) scale(0.6); opacity: 1; } |
| | 80% { transform: translateY(calc(100vh - 40px)) scale(0.6); opacity: 1; } |
| | 90% { transform: translateY(100vh) scale(0.4); opacity: 1; } |
| | 95% { transform: translateY(calc(100vh - 10px)) scale(0.4); opacity: 1; } |
| | 100% { transform: translateY(100vh) scale(0); opacity: 0; } |
| | } |
| | |
| | </style> |
| | </head> |
| | <body> |
| | <div id="div_raindrops"> |
| | <div class="content"> |
| | <h2> 今日气温: 28℃</h2> |
| | </div> |
| | <div class="raindrops_item"> |
| | |
| | </div> |
| | |
| | </div> |
| | <script> |
| | const div_raindrops = document.getElementById('div_raindrops'); |
| | for (var i = 0; i < div_raindrops.clientWidth / 5; i++) { |
| | var raindrops_item = document.createElement('div'); |
| | raindrops_item.className = 'raindrops_item'; |
| | raindrops_item.style.animationDelay = Math.random() * 5 + 's'; |
| | raindrops_item.style.left = i * 5 + 'px'; |
| | raindrops_item.style.animationTimingFunction = 'cubic-bezier(' + (Math.random() * 0.4 + 0.6) + ',' + (Math.random() * 0.2) + ',' + (Math.random() * 0.2 + 0.8) + ',' + (Math.random() * 0.2 + 0.4) + ')'; |
| | div_raindrops.append(raindrops_item); |
| | } |
| | </script> |
| | </body> |
| | </html>
