css实现可爱保温桶跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现可爱保温桶跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --unit: 1vmin; --bg: hsl(60, 80%, 90%); --glimmer: hsla(0, 0%, 100%, 0.5); --glimmer--two: hsla(0, 0%, 10%, 0.05); --glimmer--three: hsla(0, 0%, 10%, 0.025); --primary: hsla(50, 30%, 90%, 1); --shading--one: hsla(0, 0%, 10%, 0.5); --shading--two: hsl(50, 30%, 20%); --label--one: hsl(180, 60%, 50%); --label--two: hsl(80, 30%, 50%); --label--three: hsl(180,0%, 99%); --feature: hsl(0, 0%, 10%); --spin-offset: 40em; --squished: 1.1; --extended: 0.9; --height: 50em; --width: 25em; --speed: 1.2s; } html { font-size: var(--unit); } body { --shadow: radial-gradient(black 0 60%, transparent 65% 100%) 50% calc(50% + 22.25em) / 27em 6em; margin: 0; padding: 0; background: var(--bg); background-repeat: no-repeat; transform: scale(0.5); min-height: 100vh; } /* Shadow */ body:before { content: ''; position: absolute; background: radial-gradient(black, transparent); height: 6em; width: 25em; top: calc(50% + 22em); left: 50%; transform: translate(-50%, -50%); border-radius: 50%; -webkit-animation: shade var(--speed) infinite ease-in-out; animation: shade var(--speed) infinite ease-in-out; filter: blur(1px); } @-webkit-keyframes shade { 50% { opacity: 0.2; } } @keyframes shade { 50% { opacity: 0.2; } } body:after { /* --eyes: */ --pupil--left: radial-gradient(white 0 65%, transparent 70% 100%) 20% 21em / 1em 1em; --eye--left: radial-gradient(var(--feature) 0 65%, transparent 70% 100%) 20% 20em / 4em 4em; --pupil--right: radial-gradient(white 0 65%, transparent 70% 100%) calc(73%) 21em / 1em 1em; --eye--right: radial-gradient(var(--feature) 0 65%, transparent 70% 100%) 80% 20em / 4em 4em; --mouth: radial-gradient(circle at 50% 0, var(--feature) 0 40%, transparent 50% 100%) 50% 22.5em / 4em 3em; --top--gradient: radial-gradient(ellipse, transparent 60%, hsla(50, 30%, 20%, 0.5), transparent 68% 100%) 50% -1em / 27em 6em; --top: radial-gradient(ellipse, var(--primary) 0 65%, transparent 68% 100%) 50% -1em / 27em 6em; --body: linear-gradient(90deg, var(--glimmer) 0 2%, var(--glimmer--two) 6% 15%, var(--glimmer) 20% 35%, var(--glimmer--three) 40% 60%, var(--glimmer) 65% 80%, var(--glimmer--two) 88% 92%, var(--glimmer) 98% 100%) 0 0 / 25em 50em; --text--one: radial-gradient(var(--label--two) 65%, transparent 70%) 90% 8em / 8em 8em; --label--top: radial-gradient(ellipse, var(--primary) 0 65%, transparent 68% 100%) 50% 27em / 27em 6em; --label--band: radial-gradient(ellipse, var(--label--one) 0 65%, transparent 68% 100%) 50% 28em / 29em 8em; --label--body: linear-gradient(var(--label--three), var(--label--three)) 0% 30em / 25em 12em; --label--bottom: radial-gradient(ellipse, var(--label--three) 0 65%, transparent 68% 100%) 50% 39em / 27em 6em; content: ''; height: 50em; width: 25em; background: var(--pupil--left), var(--eye--left), var(--pupil--right), var(--eye--right), var(--mouth), var(--top--gradient), var(--top), var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0