純 CSS 創作出平滑的層疊海浪特效
阿新 • • 發佈:2020-09-17
這裡的波浪只是側面的,利用幾個平面一部分弧旋轉得到。
程式碼解讀
定義 dom,容器中包含一行文字和3條做海浪特效的 <span>:
<div class="sea"> <p class="title">the sea</p> <span class="wave"></span> <span class="wave"></span> <span class="wave"></span> </div>
居中顯示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(antiquewhite, navajowhite); }
設定容器樣式:
.sea { 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); }
設定文字樣式:
.sea { position: relative; } .sea .title { color: white; font-size: 24px; font-family: serif; text-align: center; line-height: 250px; text-transform: uppercase; letter-spacing: 0.4em; position: absolute; z-index: 1; width: 100%; }
製作海浪動畫效果:
.sea .wave { position: absolute; top: -250px; left: -100px; width: 500px; height: 500px; background: deepskyblue; border-radius: 43%; filter: opacity(0.4); 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; } @keyframes drift { from { transform: rotate(360deg); } }
廣州vi設計http://www.maiqicn.com 辦公資源網站大全 https://www.wode007.com
加大海浪的波動幅度,增加顏色差異:
.sea .wave { transform-origin: 50% 48%; } .sea .wave:nth-of-type(3) { background-color: orangered; filter: opacity(0.1); }
最後,隱藏容器外的內容:
.sea { overflow: hidden; }
大功告成!