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%; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0