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