单个div+css实现卡通带帽子美女效果代码-html代码-BFW代码库

代码语言：html

代码描述：单个div+css实现卡通带帽子美女效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
div, div:before, div:after {
  display: block;
  content: "";
  position: absolute;
  box-sizing: border-box;
}

body {
  height: 100vmin;
  width: 100vmin;
  display: flex;
  justify-content: center;
  align-self: end;
  align-content: end;
  margin: 0 auto;
  background: radial-gradient(ellipse, #0b2166 0vmin, #01030a 60vmin) 0vmin 30vmin/100% 100% no-repeat, linear-gradient(#01030a 0vmin, #01030a 100vmin);
}

div.witchy {
  width: 60vmin;
  height: 100vmin;
  transform: scale(1.05);
  display: flex;
  align-self: end;
  position: relative;
  background: radial-gradient(ellipse at 50% -10%, transparent 3.5vmin, #021b39 3.5vmin, #021b39 5vmin, transparent 5vmin) calc(0vmin + 17.5vmin) calc(0vmin + 14vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse at 50% -10%, transparent 5vmin, #021b39 5vmin, #021b39 6.5vmin, transparent 6.5vmin) calc(0vmin + 16vmin) calc(0vmin + 19vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse at 50% -10%, transparent 6vmin, #021b39 6vmin, #021b39 7.5vmin, transparent 7.5vmin) calc(0vmin + 15.5vmin) calc(0vmin + 24vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse at 50% -10%, transparent 7vmin, #021b39 7vmin, #021b39 8.5vmin, transparent 8.5vmin) calc(0vmin + 15.5vmin) calc(0vmin + 28vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse, #061238 2.25vmin, transparent 2.5vmin) calc(0vmin + 28.9vmin) calc(0vmin + 32.9vmin)/4vmin 4vmin no-repeat, radial-gradient(ellipse, #f24f4e 3vmin, transparent 3.25vmin) calc(0vmin + 28.5vmin) calc(0vmin + 32.5vmin)/5vmin 5vmin no-repeat, radial-gradient(ellipse at top, #032652 9.5vmin, transparent 9.75vmin) calc(0vmin + 15.5vmin) calc(0vmin + 30.5vmin)/30vmin 3vmin no-repeat, linear-gradient(-85deg, #061238 15vmin, transparent 15.25vmin) calc(0vmin + 5.5vmin) calc(0vmin + 30.5vmin)/30vmin 5vmin no-repeat, linear-gradient(85deg, #061238 15vmin, transparent 15.25vmin) calc(0vmin + 26vmin) calc(0vmin + 30.5vmin)/30vmin 5vmin no-repeat, radial-gradient(ellipse at top, #061238 10vmin, transparent 10.25vmin) calc(0vmin + 15.5vmin) calc(0vmin + 35.5vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse at 130% 40%, transparent 8.5vmin, #032652 8.75vmin, #032652 12.5vmin, transparent 12.75vmin) calc(0vmin + 22vmin) calc(0vmin + 6vmin)/14vmin 40vmin no-repeat, linear-gradient(80deg, #032652 4vmin, transparent 4.25vmin) calc(0vmin + 34.5vmin) calc(0vmin + 8vmin)/12vmin 20vmin no-repeat, radial-gradient(ellipse at bottom left, #032652 10vmin, transparent 10.25vmin) calc(0vmin + 31vmin) calc(0vmin + 9vmin)/12vmin 35vmin no-repeat, radial-gradient(ellipse at bottom right, #032652 15vmin, transparent 15.25vmin) calc(0vmin + 20.5vmin) calc(0vmin + 9vmin)/15vmin 35vmin no-repeat, radial-gradient(ellipse at top, #032652 20vmin, transparent 20.25vmin) calc(0vmin + 15.5vmin) calc(0vmin + 41vmin)/45.75vmin 9vmin no-repeat, radial-gradient(ellipse at 50% -30%, transparent 2.5vmin, #f24f4e 2.5vmin, #f24f4e 2.75vmin, transparent 3vmin) calc(0vmin + 28vmin) calc(0vmin + 54.25vmin)/7vmin 1vmin no-repeat, radial-gradient(ellipse at 50% -20%, #f77877 1.75vmin, transparent 2vmin) calc(0vmin + 29vmin) calc(0vmin + 54.75vmin)/5vmin 1.75vmin no-repeat, radial-gradient(ellipse at 50% 120%, #f77877 1vmin, transparent 1.25vmin) calc(0vmin + 29.5vmin) calc(0vmin + 53.75vmin)/2.5vmin 1.25vmin no-repeat, radial-gradient(ellipse at 50% 120%, #f77877 1vmin, transparent 1.25vmin) calc(0vmin + 31vmin) calc(0vmin + 53.75vmin)/2.5vmin 1.25vmin no-repeat, radial-gradient(ellipse, #d5997c 8.5vmin, transparent 1vmin) calc(0vmin + 21vmin) calc(0vmin + 36vmin)/21vmin 25vmin no-repeat, linear-gradient(-85deg, transparent 3.75vmin, #032652 4vmin, #032652 6vmin, transparent 6.25vmin) calc(0vmin + 12vmin) calc(0vmin + 63vmin)/10vmin 15vmin no-repeat, linear-gradient(90deg, transparent 4vmin, #032652 4vmin, #032652 7vmin, transparent 7.25vmin) calc(0vmin + 13.5vmin) calc(0vmin + 63vmin)/12vmin 25vmin no-repeat, linear-gradient(85deg, transparent 3.75vmin, #032652 4vmin, #032652 6vmin, transparent 6.25vmin) calc(0vmin + 41vmin) calc(0vmin + 63vmin)/10vmin 15vmin no-repeat, linear-gradient(90deg, transparent 3.75vmin, #032652 4vmin, #032652 7vmin, transparent 7.25vmin) calc(0vmin + 38vmin) calc(0vmin + 63.5vmin)/12vmin 25vmin no-repeat, radial-gradient(ellipse at bottom right, #032652 3.25vmin, transparent 3.4vmin) calc(0vmin + 14.25vmin) calc(0vmin + 66vmin)/4vmin 22vmin no-repeat, radial-gradient(ellipse at bottom left, #032652 3.25vmin, transparent 3.4vmin) calc(0vmin + 44.75vmin) calc(0vmin + 66vmin)/4vmin 22vmin no-repeat, radial-gradient(ellipse at top right, #032652 7vmin, transparent 7.25vmin) calc(0vmin + 4vmin) calc(0vmin + 88vmin)/18vmin 18vmin no-repeat, radial-gradient(ellipse at top left, #032652 7vmin, transparent 7.25vmin) calc(0vmin + 41vmin) calc(0vmin + 88vmin)/18vmin 18vmin no-repeat, radial-gradient(ellipse at bottom right, #032652 8vmin, transparent 8.25vmin) calc(0vmin + 3.5vmin) calc(0vmin + 83vmin)/18vmin 18vmin no-repeat, radial-gradient(ellipse at bottom left, #032652 8vmin, transparent 8.25vmin) calc(0vmin + 41.5vmin) calc(0vmin + 83vmin)/18vmin 18vmin no-repeat, radial-gradient(ellipse at top, transparent 12vmin, #061238 12vmin, #061238 13.5vmin, transparent 13.5vmin) calc(0vmin + 15.5vmin) calc(0vmin + 93vmin)/30vmin 3vmin no-repeat, radial-gradient(ellipse at bottom left, #032652 14vmin, transparent 14.25vmin) calc(0vmin + 19vmin) calc(0vmin + 62vmin)/35vmin 18vmin no-repeat, radial-gradient(ellipse at bottom right, #032652 14vmin, transparent 14.25vmin) calc(0vmin + 8.5vmin) calc(0vmin + 62vmin)/35vmin 18vmin no-repeat, linear-gradient(#032652 45vmin, transparent 1vmin) calc(0vmin + 19vmin) calc(0vmin + 79vmin)/24.5vmin 45vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 50vmin) calc(0vmin + 64vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 53vmin) calc(0vmin + 65vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 55vmin) calc(0vmin + 68.5vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 52vmin) calc(0vmin + 70vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 56vmin) calc(0vmin + 72vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 53vmin) calc(0vmin + 76vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse at 30% 50%, rgba(3, 30, 80, 0.5) 10vmin, transparent 7.25vmin) calc(0vmin + 44vmin) calc(0vmin + 62vmin)/15vmin 18vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 12vmin) calc(0vmin + 78vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 8vmin) calc(0vmin + 76vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 12vmin) calc(0vmin + 74vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 10vmin) calc(0vmin + 71vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 13vmin) calc(0vmin + 68vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 9vmin) calc(0vmin + 66vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 12.5vmin) calc(0vmin + 64vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032652 0.5vmin, transparent 0.75vmin) calc(0vmin + 5.5vmin) calc(0vmin + 67vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse, #032.........完整代码请登录后点击上方下载按钮下载查看