css布局实现一只漂亮彩色鹦鹉效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一只漂亮彩色鹦鹉效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	background: black;
}
.container {
	position: relative;
	width: 900px;
	height: 963px;
	margin: 0 auto;
}
.loro {
	transform: scale(0.7);
}
.circulo {
	position: absolute;
	transform: rotate(142deg);
	border-radius: 655px 643px 400px 990px;
	height: 230px;
	width: 196px;
	margin: 35px 263px;
	background: rgb(180, 227, 145);
	background: -webkit-linear-gradient(
		-45deg,
		rgba(180, 227, 145, 1) 0%,
		rgba(97, 196, 25, 1) 50%,
		rgba(180, 227, 145, 1) 100%
	);
	background: linear-gradient(
		135deg,
		rgba(180, 227, 145, 1) 0%,
		rgba(97, 196, 25, 1) 50%,
		rgba(180, 227, 145, 1) 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=1 );
}
.cuerpo {
	position: absolute;
	border-radius: 0px 370px 90px 439px;
	transform: rotate(-160deg);
	box-shadow: inset 1px 1px 3px 1px #333;
	background: rgb(19, 242, 19);
	background: linear-gradient(
		to bottom,
		rgba(19, 242, 19, 1) 2%,
		rgba(13, 173, 43, 1) 13%,
		rgba(13, 173, 43, 1) 87%,
		rgba(19, 242, 19, 1) 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13f213', endColorstr='#13f213',GradientType=0 );
	height: 293px;
	width: 483px;
	margin: 250px 273px;
}
.ala {
	position: absolute;
	border-radius: 145px 412px 30px 300px;
	transform: rotate(-353deg);
	background: linear-gradient(
		135deg,
		rgba(13, 173, 43, 1) 0%,
		rgba(13, 173, 43, 0.99) 5%,
		rgba(17, 37, 216, 0.94) 30%,
		rgba(232, 68, 9, 0.89) 57%,
		rgba(245, 249, 2, 0.83) 88%,
		rgba(13, 173, 43, 0.8) 100%
	); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dad2b', endColorstr='#cc0dad2b',GradientType=1 );
	height: 333px;
	width: 412px;
	margin: 255px 325px;
}
.alas {
	position: absolute;
	border-radius: 0px 412px 0px 412px;
	transform: rotate(-365deg);
	background: linear-gradient(
		135deg,
		rgba(104, 221, 8, 0.3) 0%,
		rgba(66, 141, 99, 0.3) 34%,
		rgba(17, 37, 216, 0.77) 78%,
		rgba(17, 37, 216, 1) 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d68dd08', endColorstr='#1125d8',GradientType=1 );
	height: 343px;
	width: 235px;
	margin: 280px 480px;
}
.alas::before {
	position: absolute;
	content: "";
	border-radius: 0px 412px 0px 412px;
	transform: rotate(-180deg);
	background: linear-gradient(
		135deg,
		rgba(255, 255, 17, 1) 0%,
		rgba(255, 255, 17, 0.55) 57%,
		rgba(143, 203, 78, 0.3) 88%,
		rgba(99, 183, 101, 0.3) 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff11', endColorstr='#4d63b765',GradientType=1 );
	height: 305px;
	width: 209px;
	margin: -35px 0px;
}
.alas::after {
	position: absolute;
	content: "";
	border-radius: 412px 0px 412px 0px;
	transform: rotate(-93deg);
	background: linear-gradient(
		135deg,
		rgba(252, 38, 5, 1) 0%,
		rgba(252, 38, 5, 0.99) 1%,
		rgba(155, 158, 7, 0.3) 65%,
		rgba(104, 221, 8, 0.3) 99%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc2605', endColorstr='#4d68dd08',GradientType=1 );
	height: 150px;
	width: 230px;
	margin: 40px -9px;
}
.cabeza {
	position: absolute;
	transform: rotate(-3deg);
	border-radius: 600px 480px 360px 721px;
	height: 172px;
	width: 150px;
	margin: 30px 40px;
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 17, 1) 0%,
		rgba(255, 255, 17, 0.84) 60%,
		rgba(203, 254, 113, 0.8) 77%,
		rgba(136, 252, 238, 0.8) 99%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff11', endColorstr='#cc88fcee',GradientType=1 );
}
.pico {
	position: absolute;
	border-radius: 0px 100px 14px 0px;
	transform: rotate(-142deg);
	height: 95px;
	width: 75px;
	margin: 145px 212px;
	background: rgb(124, 123, 124);
}
.pico::before {
	position: absolute;
	content: "";
	border-radius: 0px 100px 3px 0px;
	transform: rotate(-90deg);
	background: rgb(124, 123, 124);
	height: 50px;
	width: 40px;
	margin: 9px -46px;
}
.cresta1 {
	position: absolute;
	border-radius: 40px 40px 40px 40px;
	transform: rotate(145deg);
	border-right: 21px groove rgb(52, 235, 213);
	height: 80px;
	width: 80px;
	margin: 75px 205px;
}
.cresta2 {
	position: absolute;
	border-radius: 40px 40px 40px 40px;
	transform: rotate(175deg);
	border-right: 21px groove rgb(52, 235, 213);
	height: 80px;
	width: 80px;
	margin: 70px 216px;
}
.cresta3 {
	position: absolute;
	border-radius: 40px 40px 40px 40px;
	transform: rotate(180deg);
	border-right: 21px groove rgb(52, 235, 213);
	height: 80px;
	width: 80px;
	margin: 65px 230px;
}
.cresta4 {
	position: absolute;
	border-radius: 40px 40px 40px 40px;
	transform: rotate(195deg);
	border-right: 21px groove rgb(52, 235, 213).........完整代码请登录后点击上方下载按钮下载查看