单个div+css实现鸟笼中的小鸟效果代码-html代码-BFW代码库

单个div+css实现鸟笼中的小鸟效果代码

代码语言：html

代码描述：单个div+css实现鸟笼中的小鸟效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
*
{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
}

body
{
        height: 100vh;
        font-size: 2vmin;
        background: #6e20a3;
        display: flex;
        align-items: center;
        justify-content: center;
}

.crow
{
        height: 35em;
        width: 30em;
        position: relative;
        background:
                /* Cage - Top */
                radial-gradient( ellipse 100% 100%,
                        transparent calc( 50% - .3em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) right calc( 50% - 1.7em ) bottom 30.2em / 1.7em 1.7em,
                
                radial-gradient( ellipse 100% 100%,
                        transparent calc( 50% - .3em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) left 50% bottom 30.4em / 2.4em 2.4em,
                
                radial-gradient( ellipse 100% 100%,
                        transparent calc( 50% - .3em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) left calc( 50% - 1.8em ) bottom 30.2em / 1.7em 1.7em,
                
                /* Cage - Top half circles */
                radial-gradient( ellipse 100% 100% at 50% 100%,
                        transparent calc( 50% - .25em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) left 50% bottom 23.7em / 4.92em 14em,
                
                radial-gradient( ellipse 100% 100% at 50% 100%,
                        transparent calc( 50% - .3em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) left 50% bottom 23.7em / 9.38em 14em,
                
                radial-gradient( ellipse 100% 100% at 50% 100%,
                        transparent calc( 50% - .3em ),
                        #000 calc( 50% - .2em ),
                        #000 calc( 50% - .1em ),
                        transparent 50%
                ) left 50% bottom 23.7em / 13.87em 13.87em,
                
                /* Cage - Horizontal lines */
                linear-gradient( 
                        #000, #000
                ) left 50% bottom 27.35em / 11.3em .2em,
                
                linear-gradient( 
                        #000, #000
                ) left 50% bottom 23.51em / 13.8em .2em,
                
                /* Cage - Vertical lines */
                linear-gradient( 
                        #000, #000
                ) right calc( 50% - 2.3em ) bottom 10.6em / .2em 13em,
                
                linear-gradient( 
                        #000, #000
                ) right calc( 50% - 4.55em ) bottom 10.6em / .2em 13em,
                
                linear-gradient( 
                        #000, #000
                ) right calc( 50% - 6.8em ) bottom 10.6em / .2em 13em,
                
                linear-gradient( 
                        #000, #000
                ) left 50% bottom 10.6em / .2em 19.9em,
                
                linear-gradient( 
                        #000, #000
                ) left calc( 50% - 2.3em ) bottom 10.6em / .2em 13em,
                
                linear-gradient( 
                        #000, #000
                ) left calc( 5.........完整代码请登录后点击上方下载按钮下载查看