单个div+css实现卡通人物美女效果代码-html代码-BFW代码库

代码语言：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%,.........完整代码请登录后点击上方下载按钮下载查看