当前位置：网站首页>下雨小雲動畫

下雨小雲動畫

2022-08-06 08:18:00 【JiuMeilove】

效果圖
在这里插入图片描述

<!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>
原网站

版权声明
本文为[JiuMeilove]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44368963/article/details/126186758

边栏推荐

猜你喜欢

随机推荐