111 字
1 分钟
文字版的波浪效果
简单的实现需求 https://codepen.io/Chokcoco/pen/jOwEqvR
<div class="g-container"> <p>TEXT WAVE</p></div>css
html, body { width: 100%; height: 100%; display: flex;}
.g-container { margin: auto;}
p { position: relative; font-size: 120px; font-weight: bold; background: #fff; color: #000; overflow: hidden;
&::before, &::after { content: ""; position: absolute; top: -923px; left: 50%; width: 2000px; height: 2000px; border-radius: 45% 48% 43% 47%; transform: translate(-50%, -50%); background: rgba(3, 169, 244, .85); animation: rotate 10s infinite linear; z-index: 1; mix-blend-mode: lighten; }
&::after { border-radius: 43% 47% 44% 48%; animation: rotate 10s infinite .5s linear; }}
@keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); }}部分信息可能已经过时









