css+svg实现水滴分离融合旋转加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css+svg实现水滴分离融合旋转加载动画效果代码
代码标签: css svg 水滴 分离 融合 旋转 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --water-gradient-primary: #6fffe9, #90e0ef, #0077b6aa; --water-gradient-secondary: #6fffe9 30%, #90e0ef, #48cae4; --water-light: inset 2px -2px 10px #6fffe9; --water-blend: soft-light; --water-opacity: 0.25; } body { min-height: 100vh; background-color: black; flex-direction: column; justify-content: center; align-items: center; display: flex; } svg { width: 0; height: 0; } .headline { font-size: 3rem; font-family: bubblegum; margin-bottom: 4rem; background: linear-gradient(var(--water-gradient-secondary)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; filter: drop-shadow(2px 4px 2px #0077b6aa); } .liquid-loader { position: relative; width: 240px; aspect-ratio: 1/1; display: block; filter: url(#water-cohesion); } .water-drop, .water-drop::after { position: absolute; top: 0; aspect-ratio: 1/1; } .water-drop { width: 100%; left: 0; -webkit-animation-name: anim-circle; animation-name: anim-circle; -webkit-animation-delay: calc(0.4s * var(--delay)); animation-delay: calc(0.4s * var(--delay)); -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.91, 0.38, 0.21, 0.92); animation-timing-fu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0