技術標籤：css效果csscss3

純css實現雨滴掉落水面的效果

先看效果圖

參考網站：連結

html檔案

<h1>Raindrops</h1>
<ul>
    <li><span class="raindrop"></span><span class="ripple"></span>
    </li>
    <li><span class="raindrop"></span><
 
span class="ripple"></span>
    </li>
    <li><span class="raindrop"></span><span class="ripple"></span>
    </li>
    <li><span class="raindrop"></span><span class="ripple"></span
 
>
    </li>
    <li><span class="raindrop"></span><span class="ripple"></span>
    </li>
    <li><span class="raindrop"></span><span class="ripple"></span>
    </li>
    <li><span
 
 class="raindrop"></span><span class="ripple"></span>
    </li>
    <li><span class="raindrop"></span><span class="ripple"></span>
    </li>
</ul>

css程式碼

body {
    background: #1a1a1a;
    font-family: sans-serif;
}
h1,
h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}
h1 {
    top: 24px;
    font-size: 12px;
}
h2 {
    top: 44px;
    font-size: 10px;
    opacity: 0.7;
}
h2 a {
    color: white;
    text-decoration: none;
    border-bottom: 1px dotted #999999;
}
body {
    width: 100%;
    height: 100vh;
    perspective: 600px;
}
ul {
    position: absolute;
    width: 60vh;
    height: 60vh;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(65deg);
    transform-style: preserve-3d;
}
ul li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
}
ul li span {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}
ul li span.raindrop {
    width: 5px;
    height: 5px;
    background: #cccccc;
    animation: raindrop 8s ease-in infinite;
    animation-fill-mode: backwards;
}
ul li span.ripple {
    width: 100%;
    height: 100%;
    border: 2px solid #cccccc;
    animation: ripple 8s ease-out infinite;
    animation-fill-mode: backwards;
}
li:nth-child(1) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(45deg);
}
li:nth-child(1) span.raindrop,
li:nth-child(1) span.ripple {
    animation-delay: 0s;
}
li:nth-child(2) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(90deg);
}
li:nth-child(2) span.raindrop,
li:nth-child(2) span.ripple {
    animation-delay: 1s;
}
li:nth-child(3) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(135deg);
}
li:nth-child(3) span.raindrop,
li:nth-child(3) span.ripple {
    animation-delay: 2s;
}
li:nth-child(4) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(180deg);
}
li:nth-child(4) span.raindrop,
li:nth-child(4) span.ripple {
    animation-delay: 3s;
}
li:nth-child(5) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(225deg);
}
li:nth-child(5) span.raindrop,
li:nth-child(5) span.ripple {
    animation-delay: 4s;
}
li:nth-child(6) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(270deg);
}
li:nth-child(6) span.raindrop,
li:nth-child(6) span.ripple {
    animation-delay: 5s;
}
li:nth-child(7) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(315deg);
}
li:nth-child(7) span.raindrop,
li:nth-child(7) span.ripple {
    animation-delay: 6s;
}
li:nth-child(8) {
    transform-origin: 50% 100%;
    transform: translate(-50%, -50%) rotate(360deg);
}
li:nth-child(8) span.raindrop,
li:nth-child(8) span.ripple {
    animation-delay: 7s;
}
@keyframes raindrop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(200px);
    }
    1%,
    9% {
        opacity: 1;
    }
    10%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(0px);
    }
}
@keyframes ripple {
    0%, 10% {
        transform: translate(-50%, -50%) scale(0);
    }
    40% {
        opacity: 1;
    }
    80%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

如果覺得有用，各位觀眾老爺點個贊再走哈~謝謝(其實再加個關注也不介意哈哈哈)