单个div+css布局实现猫头鹰在枝头效果代码-html代码-BFW代码库

单个div+css布局实现猫头鹰在枝头效果代码

代码语言：html

代码描述：单个div+css布局实现猫头鹰在枝头效果代码

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

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

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

  
  
<style>
:root {
  --white: #fff;
  --purple: #602e53;
  --black: #21102e;
  --red: #d1475b;
  --orange: #e08463;
  --brown: #934842;
}

body {
  background-color: #efefdc;
}

#owl {
  box-sizing: border-box;
  position: absolute;
  width: 240px;
  height: 240px;
  left: calc(50% - 120px);
  top: calc(50% - 120px);
  background: radial-gradient(
        circle at center 0,
        var(--purple) 7px,
        transparent 8px
      )
      92px 132px / 16px 8px,
    radial-gradient(circle at center 0, var(--purple) 7px, transparent 8px) 68px
      132px / 16px 8px,
    radial-gradient(circle at center 0, var(--purple) 7px, transparent 8px) 80px
      148px / 16px 8px,
    radial-gradient(circle at center 0, var(--purple) 7px, transparent 8px) 80px
      116px / 16px 8px,
    radial-gradient(var(--red) 29px, transparent 30px) 59px 95px / 60px 60px,
    linear-gradient(var(--purple) 99%, transparent 1%) 88px 85px / 30px 40px,
    radial-gradient(
        circle at center 0,
        transparent 6px,
        var(--black) 7px 15px,
        transparent 16px
      )
      136px 48px / 32px 16px,
    radial-gradient(
        circle at center 0,
        transparent 6px,
        var(--black) 7px 15px,
        transparent 16px
      )
      72px 48px / 32px 16px,
    radial-gradient(var(--white) 31px, transparent 32px) 120px 16px / 64px 64px,
    radial-gradient(var(--white) 31px, transparent 32px) 58px 16px / 64px 64px,
    linear-gradient(var(--white) 99%, transparent 1%) 85px 49px / 70px 30px,
    radial-gradient(circle at center 0, var(--red) 29px, transparent 30px) 150px
      top / 60px 60px,
   .........完整代码请登录后点击上方下载按钮下载查看