纯css绘制河豚呼吸效果
代码语言:html
所属分类:动画
代码描述:纯css绘制河豚呼吸效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); :root { /* color */ --background-color-1 : #ffa5f0; --background-color-2 : #ffbb00; --pufferfish-outline-color : #2a1f17; --pufferfish-body-color-1 : #f7d8c5; --pufferfish-body-color-2 : #8f552a; --pufferfish-body-color-3 : #bc9267; --pufferfish-fin-pectoral-color : var(--pufferfish-body-color-3); --pufferfish-lips-color : var(--pufferfish-body-color-3); --pufferfish-tail-color : var(--pufferfish-body-color-3); --pufferfish-spike-color : var(--pufferfish-body-color-3); /* size */ --pufferfish-width : 200px; --pufferfish-height : 200px; --pufferfish-lips-width : 20px; --pufferfish-lips-height : 10px; --pufferfish-eye-size : 25px; --pufferfish-fin-pectoral-size : 25px; --pufferfish-tail-size : 50px; --pufferfish-spike-size : 10px; /* misc */ --thick-border : 5px solid var(--pufferfish-outline-color); --thin-border : 3px solid var(--pufferfish-outline-color); --pufferfish-bloat-duration : 10s; } @keyframes bgColorAnimate { 0%, 5%, 95%, 100% { background: var(--background-color-1) } 40%, 60% { background: var(--background-color-2) } } @keyframes bloatAnim { 0%, 5%, 95%, 100% { transform: var(--transform-1) } 40%, 60% { transform: var(--transform-2) } } body { height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; overflow: hidden; font-family: 'Balsamiq Sans', cursive; animation: bgColorAnimate var(--pufferfish-bloat-duration) linear infinite; } main { display: flex; flex-direction: column; } .pufferfish { height: var(--pufferfish-height); width: var(--pufferfish-width); } .pufferfish > * { position: absolute; } .pufferfish__body { background: linear-gradient(to bottom, var(--pufferfish-body-color-2) 0%, var(--pufferfish-body-color-2) 60%, var(--pufferfish-body-color-1) 0%); height: var(--pufferfish-height); width: var(--pufferfish-width); border-radius: 50%; border: var(--thick-border); --transform-1: rotateX(70deg); --transform-2: rotateX(0deg); } .pufferfish__body, .pufferfish__eye, .pufferfish__fin-pectoral, .pufferfish__tail, .pufferfish__lips { transform: var(--transform-1); --custom-animation: bloatAnim; animation-name: var(--custom-animation); animation-duration: var(--pufferfish-bloat-duration); animation-iteration-count: infinite; animation-timing-function: linear; } .pufferfish__eye { border-radius: 50%; height: var(--pufferfish-eye-size); width: var(--pufferfish-eye-size); background: var(--pufferfish-outline-color); border: var(--thin-border); box-shadow: inset -6px -2px 0 5px white; --transform-1: translate(10px, 90px); --transform-2: translate(10px, 70px); } @keyframes finPectoralAnim { 40%, 41%, 50%, 60% { transform: var(--transform-2) rotate(0deg) } 42%, 46% { transform: var(--transform-2) rotate(20deg) } 44%, 48% { transform: var(--transform-2) rotate(-20deg) } 0%, 5%, 95%, 100% { transform: var(--transform-1) } } .pufferfish__fin-pectoral { background: var(--pufferfish-fin-pectoral-color); width: var(--pufferfish-fin-pectoral-size); height: var(--pufferfish-fin-pectoral-size); border-radius: 80% 20% 20% 80% / 50%; border: var(--thin-border); transform-origin: center left; --transform-1: translate(50px, 90px); --transform-2: translate(50px, 80px); --custom-animation: finPectoralAnim; } @keyframes tailAnim { 0%, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0