div+css布局可爱卡通猫头鹰效果代码-html代码-BFW代码库

div+css布局可爱卡通猫头鹰效果代码

代码语言：html

代码描述：div+css布局可爱卡通猫头鹰效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    body {
  background: #cba;
}
.pop {
  --pupil: #000;
  --eye: #ff0;
  --beak: #fb0;
  --color1: #d6a664;
  --color2: #8d3e00;
  --color3: #6d3c00;
  --color4: #441b06;
  --color1: #741f00;
  font-size: 0.75vmin;
  width: 50em;
  height: 90em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    /* eye */
    radial-gradient(farthest-side, var(--pupil) 50%, var(--eye) 50.5% 99.5%, #ff00 99.9999%) 0 15em / 25.1em 25.1em,
    radial-gradient(farthest-side, var(--pupil) 50%, var(--eye) 50.5% 99.5%, #ff00 99.9999%) 100% 15em / 25.1em 25.1em,
    /* beak */
    conic-gradient(#fb0 30deg, #fb00 0 330deg, var(--beak) 0) 50% 27.5em / 25em 25em,
    /* legs */
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 0 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 6.25em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 12.5em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 31.25em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 37.5em 75% / 6.25em 6.25em,
    radial-gradient(farthest-side, var(--beak) 99%, #0000 99.99%) 100% 75% / 6.25em 6.25em,
    /* background */
    radial-gradient(farthest-side at 0 100%, var(--color1) 25%, var(--color2) 0 50%, var(--color3) 0 75%, var(--color4) 0 99.5%, #0a10 99.9999%) 0 0 / 25em 25em,
    radial-gradient(farthest-side at 100% 100%, var(--color1) 25%, var(.........完整代码请登录后点击上方下载按钮下载查看