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