单个div+css实现卡通人物美女效果代码
代码语言:html
所属分类:布局界面
代码描述:单个div+css实现卡通人物美女效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 400px; height: 100vh; position: relative; background-color: #9acd32; } div { position: absolute; left: 50%; top: 50%; } div::before, div::after { display: block; content: ''; position: absolute; } @media (max-width: 400px) { div:not(.no-scale) { transform: scale(0.8); } } #artist { width: 250px; height: 250px; margin-left: -125px; margin-top: -90px; background: radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%) 15% 43%/6% 6%, radial-gradient(circle, #d3d3d3 50%, rgba(255,255,255,0) 51%) 13.5% 43%/10% 10%, radial-gradient(ellipse, #7fffd4 35%, rgba(127,255,212,0) 36%) 11.9% 58%/14% 20%, radial-gradient(ellipse, #00ced1 50%, rgba(0,206,209,0) 51%) 11.9% 58%/14% 20%, linear-gradient(#d3d3d3, #d3d3d3) 16.8% 51%/1% 10%, radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%) 84.9% 43%/6% 6%, radial-gradient(circle, #d3d3d3 50%, rgba(255,255,255,0) 51%) 86.5% 43%/10% 10%, radial-gradient(ellipse, #7fffd4 35%, rgba(127,255,212,0) 36%) 88% 58%/14% 20%, radial-gradient(ellipse, #00ced1 50%, rgba(0,206,209,0) 51%) 88% 58%/14% 20%, linear-gradient(#d3d3d3, #d3d3d3) 83% 51%/1% 10%, radial-gradient(circle, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 50.8%) 15% 35%/11% 11%, radial-gradient(circle, #f4a460 50%, rgba(244,164,96,0) 50.8%) 11% 35%/16% 16%, radial-gradient(circle, #a0522d 50%, transparent 50.8%) 8.8% 34.3%/20% 20%, radial-gradient(circle, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 50.8%) 85% 35%/11% 11%, radial-gradient(circle, #f4a460 50%, rgba(244,164,96,0) 50.8%) 89% 35%/16% 16%, radial-gradient(circle, #a0522d 50%, transparent 50.8%) 91% 34.3%/20% 20%, radial-gradient(ellipse, white 15%, rgba(255,255,255,0) 16%) 50% 105%/14% 20%, radial-gradient(ellipse, #d3d3d3 30%, rgba(211,211,211,0) 31%) 50% 105%/14% 20%, radial-gradient(ellipse at 50% 0, transparent 29.5%, #a52a2a 30%, #a52a2a 33%, transparent 33.5%) 50% 109%/46% 30%, radial-gradient(ellipse at 50% 0, transparent 29.5%, #a52a2a 30%, #a52a2a 33%, transparent 33.5%) 50% 113%/45% 30%, radial-gradient(ellipse at 50% 0, transparent 29.5%, #a52a2a 30%, #a52a2a 33%, transparent 33.5%) 50% 173%/46% 55%, linear-gradient(#f4a460, #f4a460) 50% 84%/16.8% 10%, linear-gradient(to right, #a0522d 4px, transparent 4px) 50% 80%/20% 20%, linear-gradient(to left, #a0522d 4px, transparent 4px) 50% 80%/20% 20%, radial-gradient(ellipse at 50% 100%, transparent 49%, #1c2f2f 49.5%, #1c2f2f 52%, transparent 52.5%) 50% 110%/120% 40%, linear-gradient(#1c2f2f, #1c2f2f) 37% 100%/0.25em 22%, linear-gradient(#1c2f2f, #1c2f2f) 63% 100%/0.25em 22%, radial-gradient(ellipse at 100% 100%, #2f4f4f 50%, rgba(47,79,79,0) 50.5%) 0 100%/37% 29%, radial-gradient(ellipse at 0 100%, #2f4f4f 50%, rgba(47,79,79,0) 50.5%) 100% 100%/37% 29%, linear-gradient(to bottom, #dc143c 30%, #daa520 30%) 50% 100%/40% 6%, radial-gradient(#f4a460, #f4a460) 50% 98%/24% 20%, radial-gradient(circle at 50% 0, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%, linear-gradient(#f4a460, #f4a460) 50% 80%/20% 20%; background-color: #6b8e23; background-repeat: no-repeat; border-radius: 50%; } #artist::before { box-sizing: border-box; width: 160px; height: 200px; left: 50%; top: -10%; margin-left: -80px; background: radial-gradient(circle at 50% 0, #f4a460 30%,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0