24.純 CSS 創作出平滑的層疊海浪特效
阿新 • • 發佈:2019-01-19
targe top rom hit 部分 hidden absolute round abs
原文地址:https://segmentfault.com/a/1190000014895634
感想:這裏的波浪只是側面的,利用幾個平面一部分弧旋轉得到。
HTML代碼:
<div class="sea"> <p class="title">the sea</p> <span class="wave"></span> <span class="wave"></span> <span class="wave"></span> </div>
CSS代碼:
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(antiquewhite, navajowhite); } .sea { position: relative; width: 300px; height: 300px; background-color: whitesmoke; background-image: linear-gradient( darkblue, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5)); border-radius: 5px; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } /* 這裏只有水平居中和行高一定 */ .sea .title { position: absolute; width: 100%; color: white; font-size: 24px; font-family: serif; text-align: center; line-height: 250px; text-transform: uppercase; letter-spacing: 0.4em; z-index: 1; } /* 制作海浪動畫效果: 讓三個平面按不同時間旋轉 */ .sea .wave { position: absolute; top: -250px; left: -100px; width: 500px; height: 500px; background: deepskyblue; border-radius: 43%; filter: opacity(0.4); /* 加大海浪的波動幅度:設置旋轉元素的基點位置 */ transform-origin: 50% 48%; animation: drift linear infinite; } .sea .wave:nth-of-type(1) { animation-duration: 5s; } .sea .wave:nth-of-type(2) { animation-duration: 7s; } .sea .wave:nth-of-type(3) { animation-duration: 9s; /* 增加顏色差異 */ background-color: orangered; filter: opacity(0.1); } @keyframes drift { from { transform: rotate(360deg); } }
24.純 CSS 創作出平滑的層疊海浪特效