单个div+css布局实现鹦鹉效果代码-html代码-BFW代码库

单个div+css布局实现鹦鹉效果代码

代码语言：html

代码描述：单个div+css布局实现鹦鹉效果代码

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

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

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

  
  
<style>
:root {
  --red: #fa4846;
  --red-100: #fb5f5e;
  --red-200: #fb7876;
  --red-300: #fc908f;
  --blue: #3c2bc7;
  --blue-100: #292879;
  --blue-200: #1e1d56;
  --white: #fff;
  --melon: #ffc1b2;
  --brown: #792b08;
}

body {
  background-color: #e4fdbe;
}

#parrot {
  width: 184px;
  height: 300px;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  background: 
    /* Tail */ linear-gradient(var(--red-200), var(--red-200))
      42px 180px / 30px 90px,
    radial-gradient(circle at 0 center, var(--red-200) 29px, transparent 30px)
      42px 238px / 30px 60px,
    linear-gradient(var(--red-300), var(--red-300)) 52px 159px / 30px 90px,
    radial-gradient(circle at 0 center, var(--red-300) 30px, transparent 30px)
      52px 220px / 30px 60px,
    /* Head */
      radial-gradient(circle at 100% 100%, var(--red) 69px, transparent 70px)
      82px 0 / 70px 70px,
    radial-gradient(circle at 0 100%, var(--blue-200) 39px, transparent 40px)
      142px 8px / 40px 40px,
    radial-gradient(circle at 0 center, var(--blue-100) 19px, transparent 20px)
      152px 27px / 20px 40px,
    /* Branch */ linear-gradient(var(--brown), var(--brown)) 0 170px / 160px
 .........完整代码请登录后点击上方下载按钮下载查看