css实现卡通可爱美西螈听音乐动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现卡通可爱美西螈听音乐动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; min-height: 100vh; background: #59ac; background: linear-gradient(#fff7, #fff0), radial-gradient(at 80% -20%, #59a0, #59a), conic-gradient(at 80% -20%, #0000 60%, #fff1 0 63%, #0000 0 66%, #fff1 0 68%, #0000 0), #59a4; } article { --line: #a21a3e; --skin: #f7d9d9; --skin-mid: #e7b9b9; --skin-dark: #ea9aa3; font-size: 1vmin; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50em; aspect-ratio: 4/5; } article *, article *::before, article *::after { position: absolute; box-sizing: border-box; } @keyframes nod { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-10deg); } } .head { animation: nod 1s linear infinite; --angle: -11deg; width: 60%; height: 37.5%; top: 5%; left:13%; transform: rotate(var(--angle)); transform-origin: 95% 20%; } .face { width: 100%; height: 100%; top: 0; left: 0; background: var(--skin); border-radius: 105% 95% 95% 95% / 125% 115% 80% 75%; border: 0.5em solid var(--line); clip-path: polygon(0 0, 100% 0, 66% 100%, 0% 100%); border-left-width: 0.6em; border-bottom-width: 0.7em; box-shadow: inset 0 1em #fff4, inset 0 -0.75em #f001; } .eye { width: 8.5%; height: 17%; background: /* radial-gradient(circle at 50% 10%, #fff 4%, #fff0 0), */ radial-gradient(circle at 36% 30%, #fff 20%, #fff0 0), radial-gradient(circle at 68% 75%, #fff 10%, #fff0 0), var(--line); border-radius: 50%; transform: rotate(calc(-0.7 * var(--angle))); top: 47%; left: 9%; } .eye + .eye { left: 53%; top: 48%; } .mouth { width: 12%; height: 10%; border-radius: 100% / 40% 40% 150% 150%; top: 61%; left: 28%; transform: rotate(-4deg); box-shadow: 0 0.5em 0 0.25em var(--line) } .cheek { width:14%; height: 10%; background: repeating-linear-gradient(-45deg, #0000 0 15%, #f003 0 26%), #f003; background-clip: content-box; border-radius: 50%; border: 0.5em solid #f003; top: 60%; left: 1%; transform: rotate(-8deg); } .cheek + .cheek { top: 60%; left: 55%; } .body { width: 47%; height: 67%; border: 0.5em solid var(--line); border-left: 0; border-radius: 0 100% 100% 0 / 50% 60% 50% 50%; top: 10%; left: 46%; background: var(--skin); clip-path: polygon(75% 0, 100% 0,100% 100%, 20% 100%, -50% 50%, -100% 70%, -100% 30%); box-shadow: inset -0.75em 0.5em #fff4; &::before { content: ""; width: 14%; height: 20%; border-top: 0.2em solid #fff0; border-right: 0.5em solid var(--line); border-radius: 50%; top: 50%; left: -13%; transform: rotate(-10deg); box-shadow: 1em 0 0 0.5em var(--skin); } &::after { content: ""; width: 25%; height: 10%; border: 0.1em solid #0000; border-left: 0.4em solid var(--line); border-radius: 50% / 100%; top: 66.5%; left: 5.5%; transform: rotate(-20deg); filter: drop-shadow(-1.25em 0.5em var(--line)) } } .horn { color: var(--line); border: 0.5em solid var(--line); border-radius: 100%; width: 30%; height: 35%; background: var(--skin-dark); } .horn-1 { left: 2.5%; top: 10%; transform: rotate(-25deg); } .horn-2 { top: 25%; transform: rotate(-45deg) scale(1.05); left: -3%; } .horn-3 { top: 40%; transform: rotate(-70deg) scale(0.8) skew(15deg); left: -8%; } .horn-4 { transform: scaleX(-1) rotate(30deg); left: 72%; top: 15%; } .horn-5 { transform: scaleX(-1) rotate(-10deg) scale(0.94); width: 30%; height: 38%; left: 80%; top: 32%; } .horn-6 { transform: scaleX(-1) rotate(-40deg) scale(0.84); width: 30%; height: 38%; left: 70%; top: 55%; } .gill { width: 60%; height: 78%; background: linear-gradient(90deg, #0000 65%, var(--skin) 0); border-radius: 35% 35% 50% 35% / 50%; right: 7%; top: 18%; box-shadow: inset -1em 0 0 -0.5em var(--line) } .hand { --c: var(--skin); width: 33%; height: 29%; /* background: radial-gradient(100% 70% at 100% 50%, #0000 75%, #000 0 99%, #0000 0) 0 0 / 30% 77%, radial-gradient(100% 70% at 0% 50%, #0000 80%, #000 0 99%, #0000 0) 100% 0 / 30% 90%, radial-gradient(farthest-side at 50% 20%, #0000 62%, #000 0 99%, #0000 0) 15% 100% / 25% 30%, radial-gradient(farthest-side at 50% 20%, #0000 60%, #000 0 99%, #0000 0) 45% 95% / 20% 30%, radial-gradient(farthest-side at 50% 20%, #0000 60%, #000 0 99%, #0000 0) 70% 95% / 20% 30%, #fff; background-repeat: no-repeat; box-shadow: 0 0 0 3em #fff; filter: blur(0.35em) contrast(20); mix-blend-mode: multiply; transform: scale(0.8) */ background: radial-gradient(farthest-side at 50% 25%, var(--c) 78%, #0000 80%), radial-gradient(farthest-side at 50% 20%, var(--c) 96%, #0000 99%) 40% 100% / 22% 25% ; background-repeat: no-repeat; color: var(--line); filter: drop-shadow(-0.3em 0.2em) drop-shadow(0.3em 0.2em) drop-shadow(-0.1em 0.1em) drop-shadow(0.1em 0.01em) ; clip-path: p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0