单个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( 50% - 4.55em ) bottom 10.6em / .2em 13em,
		
		linear-gradient( 
			#000, #000
		) left calc( 50% - 6.8em ) bottom 10.6em / .2em 13em,
		
		/* Cage - Base */
		linear-gradient( 
			#000, #000
		) left 50% bottom 9.2em / 13.8em 1.4em,
		
		/* Crow - Eye */
		radial-gradient( ellipse 100% 100%,
			#000 37%,
			#FFF 40%,
			#FFF 47%,
			transparent 50%
		) left calc( 50% - 2.3em ) bottom calc( 50% + 2.3em ) / 2.1em 2.1em,
		
		/* Crow - Beak border */
		linear-gradient(
			#111, #111
		) left calc( 50% - 5em ) bottom 19em / .2em 3em,
		
		/* Crow - Body */
		linear-gradient( 45deg,
			transparent 31%,
			#311f59 31%, 
			#000 61%,
			transparent 61%
		) left calc( 50% + 1em ) bottom 50% / 12em 9.16em,
		
		radial-gradient( ellipse 50% 100% at 100% 0,
			#311f59 50%,
			transparent 50.5%
		) left calc( 50% - 10.7em ) bottom 6.45em / 23em 13em,
		
		linear-gradient(
			#311f59, #311f59
		) left calc( 50% + 1em ) bottom 12.95em / 1em 1em,
		
		/* Crow - Tail */
		linear-gradient( 45deg,
			transparent 40%,
			#000 40%, 
			#000 45%,
			transparent 45%
		) left calc( 50% + 7.2em ) bottom 10em / 9em 9em,
		
		/* Crow - Beak */
		linear-gradient(
			#111, #111
		) left calc( 50% - 5.9em ) bottom 20.3em .........完整代码请登录后点击上方下载按钮下载查看