css实现三维球体容器填充液体动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维球体容器填充液体动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .ball { --s: 200px; /* control the size */ --c: red; /* the color */ width: var(--s); aspect-ratio: 1; border-radius: 100%; display: grid; overflow: hidden; background: radial-gradient(at 36% 45%,#0000, 80%, #000); box-shadow: calc(var(--s)/8) calc(var(--s)/8) calc(var(--s)/8) calc(var(--s)/-8) #0009; } .ball:before, .ball:after{ content: ""; grid-area: 1/1; } .ball:before { background: radial-gradient(circle at top, var(--c), #000); mix-blend-mode: multiply; -webkit-mask: linear-gradient(#000 0 0) bottom no-repeat; animation: c 7s linear infinite; } .ball:after { border-radius: 50%; z-index: 1; width: 0%; aspect-ratio: 1; margin: auto; background-image: linear-gradient(var(--c) 0 0); background-blend-mode: multiply; animation: b 7s linear infinite, a .........完整代码请登录后点击上方下载按钮下载查看
网友评论0