div+CSS布局实现一个可爱卡通蝾螈效果代码
代码语言:html
所属分类:布局界面
代码描述:div+CSS布局实现一个可爱卡通蝾螈效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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 { aanimation: 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); filter: drop-shadow(-0.3em -0.2em var(--line)) drop-shadow(0 0.4em var(--line)) drop-shadow(0.3em 0em var(--line)) ; border-radius: 90% / 100%; width: 30%; height: 35%; background: radial-gradient(at 30% 29%, var(--skin-dark) 29%, #0000 30%), radial-gradient(120% 120% at 95% 32%, #0000 39%, var(--skin-dark) 40%) 0 100% / 90% 70% no-repeat; } .horn-1 { left: -2.5%; top: -5.5%; transform: rotate(-25deg); } .horn-2 { top: 25%; transform: rotate(-45deg) scale(1.05); left: -15%; } .horn-3 { top: 57%; transform: rotate(-70deg) scale(0.8) skew(15deg); left: -15%; } .horn-4 { transform: scaleX(-1) rotate(30deg); width: 50%; height: 35%; left: 72%; top: -5%; background: radial-gradient(closest-side circle at 25% 40%, var(--skin-dark) 99%, #0000), radial-gradient(210% 120% at 90% 10%, #0000 20%, var(--skin-dark) 21%) 0 100% / 90% 70% no-repeat; } .horn-5 { transform: scaleX(-1) rotate(-10deg) scale(0.94); width: 50%; height: 38%; left: 80%; top: 30%; background: radial-gradient(closest-side circle at 20% 40%, var(--skin-dark) 99%, #0000), radial-gradient(120% 120% at 90% 10%, #0000 39%, var(--skin-dark) 40%) 0 100% / 90% 70% no-repeat; } .horn-6 { transform: scaleX(-1) rotate(-40deg) scale(0.84); width: 50%; height: 38%; left: 70%; top: 60%; background: radial-gradient(closest-side circle at 20% 43%, var(--skin-dark) 99%, #0000), radial-gradient(120% 120% at 90% 10%, #0000 39%, var(--skin-dark) 40%) 0 100% / 90% 70% no-repeat; } .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