svg+css实现水面波纹波动动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现水面波纹波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap"); * { box-sizing: border-box; margin: auto; } body { position: relative; height: 100vh; display: flex; background: radial-gradient(circle at bottom right, #007cb7, #83b4b6 69%, #e6ecebaf 70%, #00abc5), #00abc5; overflow: hidden; perspective: 1440px; font-family: "Yeseva One"; } svg { position: absolute; } .quote { position: relative; width: 90%; max-width: 90vh; aspect-ratio: 1/1; display: flex; flex-direction: column; border-radius: 20px 20px 50% 50%; overflow: hidden; text-align: center; word-wrap: no-wrap; filter: drop-shadow(-20px 20px 5px #006793); } .quote figure { margin: auto; font-size: clamp(12vh, 12vh, 6rem); filter: drop-shadow(0 0 5px #006793); } .quote figure span.wave { background: -50% 0%/200% 100% linear-gradient(90deg, #ffffff0f, #006793, #ffffff0f); background-position: -50% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 5s linear infinite, sheen 10s linear infinite; } .quote figure span.wave.oppo { animation-direction: reverse; } .quote figure figcaption { font-size: clamp(8vh, 8vh, 4rem); text-align: right; } .quote .frame { position: absolute; width: 100%; height: 100%; background: #ffffff; } .quote .frame:nth-of-type(1) { height: 33.3%; opacity: 0.6; } .quote .frame:nth-of-type(2) { height: 66.6%; opacity: 0.4; } .quote .frame:nth-of-type(3) { height: 99.9%; opacity: 0.2; } .pond { position: absolute; width: 100%; height: 100%; background: #ffff000f; } .pond .film { position: absolute; width: 100%; height: 100%; backdrop-filter: blur(8px); background-size: cover; filter: url(#displacementFilter) url(#goo); } .pond .ripple { position: absolute; width: 50vw; aspect-ratio: 1/1; border-radius: 50%; border: 5px solid #fff; transform-origin: center; transform: translate(-50%, -50%) scale(0); opacity: 0; animation: ripple 5s ease-in-out infinite; } .pond .ripple:nth-of-type(1) { width: 46vw; top: 5vh; left: 8vw; border-width: 3px; animation-duration: 9s; animation-delay: 1.3522692768s; } .pond .ripple:nth-of-type(2) { width: 43vw; top: 43vh; left: 98vw; border-width: 4px; animation-duration: 10s; animation-delay: 1.5808877293s; } .pond .ripple:nth-of-type(3) { width: 35vw; top: 69vh; left: 100vw; border-width: 5px; animation-duration: 6s; animation-delay: 2.1160101496s; } .pond .ripple:nth-of-type(4) { width: 50vw; top: 91vh; left: 86vw; border-width: 5px; animation-duration: 6s; animation-delay: 1.1326003571s; } .pond .ripple:nth-of-type(5) { width: 47vw; top: 94vh; left: 92vw; border-width: 4px; animation-duration: 6s; animation-delay: 2.6522500533s; } .pond .ripple:nth-of-type(6) { width: 37vw; top: 31vh; left: 88vw; border-width: 5px; animation-duration: 7s; animation-delay: 2.1433547672s; } .pond .ripple:nth-of-type(7) { width: 44vw; top: 16vh; left: 100vw; border-width: 4px; animation-duration: 6s; animation-delay: 2.4722296987s; } .pond .ripple:nth-of-type(8) { width: 48vw; top: 32vh; left: 55vw; border-width: 3px; animation-duration: 9s; animation-delay: 2.2586576246s; } .pond .fish { position: absolute; width: 38px; aspect-ratio: 0.3/1; display: flex; flex-direction: column; filter: url(#goo); animation: voyage 20s linear infinite; transform: rotate(38deg); } .pond .fish .part { width: 100%; flex-grow: 2; background: #006793; } .pond .fish .part.head { transform-origin: bottom center; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation: swim 1.3s linear infinite; } .pond .fish .part.tail { transform-origin: top center; flex-grow: 4; clip-path: polygon(50% 100%, 100% 0%, 0% 0%); animation: swim 1.3s linear infinite reverse; } .pond .fish:nth-of-type(1) { top: 110vh; left: 30vw; animation-delay: 0.2548098335s; animation-duration: 15s; } .pond .fish:nth-of-type(2) { top: 50vh; left: -5vw; animation-delay: 1.0269749125s; animation-duration: 18s; } .pond .fish:nth-of-type(3) { top: 110vh; left: 70vw; animation-delay: 2.3051817679s; animation-duration.........完整代码请登录后点击上方下载按钮下载查看
网友评论0