下雨小雲動畫
效果圖
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下雨的白云title><style>body {background-color: #212121;display: flex;justify-content: center;align-items: center;width: 100vw;height: 90vh;}.container {position: relative;width: 110px;height: 30px;background-color: #fff;border-radius: 100px;box-shadow: 0 -3px 13px #fff;animation: glow 5s linear infinite;}.container::before {content: "";position: absolute;top: -20px;left: 10px;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;box-shadow: 1px -3px 13px #fff;animation: glow 5s linear infinite;}.container::after {content: "";position: absolute;top: -40px;left: 30px;width: 70px;height: 70px;background-color: #fff;border-radius: 50%;box-shadow: 1px -3px 13px #fff;animation: glow 5s ease-in-out infinite;}.rain {position: relative;display: flex;z-index: 1;}.rain span {position: relative;top: 15px;width: 3px;height: 3px;background-color: #fff;margin: 10 2px;border-radius: 50%;animation: rain 5s linear infinite;animation-duration: calc(15s/var(--raindrop));transform-origin: bottom;}@keyframes glow {0%,100% {box-shadow: 1px -3px 3px #fff;}50% {box-shadow: 1px -3px 13px #fff;}}@keyframes rain {0% {opacity: 1;height: 3px;transform: translateY(0);}70% {height: 5px;opacity: .75;transform: translateY(100px);}85% {height: 3px;opacity: 1;}100% {height: 2px;opacity: 0;transform: translateY(100px);box-shadow: 0 -3px 3px #fff;}}style>
head><body><div class="container">div><script>var box = document.getElementsByClassName('container')[0];var rainBox = document.createElement('div');rainBox.classList = 'rain';box.appendChild(rainBox);for (let index = 0; index < 35; index++) {var raindrop = document.createElement('span');var a = Math.random() * (25 - 15) + 15;console.log(a)raindrop.style = '--raindrop:' + a + ';';rainBox.appendChild(raindrop);}script>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！