css绘制一个小企鹅在雪地的效果代码-html代码-BFW代码库

css绘制一个小企鹅在雪地的效果代码

代码语言：html

所属分类：动画

代码描述：css绘制一个小企鹅在雪地的效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.box {
	position: relative;
	margin: auto;
	display: block;
	margin-top: 8%;
	width: 600px;
	height: 420px;
	background: none;
	background: linear-gradient(to bottom, #33ccff 0%, #ffffff 100%);
	border: ;
}

.body {
	background: ;
	height: 100%;
}

.head {
	background-color: black;
	width: 270px;
	height: 300px;
	top: 16.5%;
	left: 35%;
	display: inline-block;
	position: absolute;
	border-radius: 60% 55% 30% 30%;
}

.head2 {
	background-color: white;
	width: 230px;
	height: 260px;
	top: 9%;
	left: 8%;
	display: inline-block;
	position: absolute;
	border-radius: 55% 55% 30% 30%;
}

.arm-left {
	width: 50px;
	height: 100px;
	background-color: #000;
	position: absolute;
	top: 45%;
	right: 95%;
	animation-name: arms;
	animation-duration: 4s;
	border-radius: 1990% 100% 1700% 100%;
	-webkit-animation: action 1s infinite alternate;
	animation: action 1s infinite alternate;
}

.arm-right {
	width: 50px;
	height: 100px;
	background-color: #000;
	position: absolute;
	top: 43%;
	left: 93%;
	border-radius: 100% 1990% 100% 1700%;
	animation-name: arms;
	animation-duration: 4s;
	-webkit-animation: action 1s infinite alternate;
	animation: action 1s infinite alternate;
}

.blush {
	width: 30px;
	height: 20px;
	background-color: #ffc0cb;
	border-radius: 50%;
	position: absolute;
	top: -3%;
	left: 188%;
	z-index: 3;
}

.blush2 {
	width: 30px;
	height: 20px;
	background-color: #ffc0cb;
	border-radius: 50%;
	position: absolute;
	top: 1%;
	left: -135%;
	z-index: 3;
}

.eye-left {
	position: absolute;
	background: black;
	width: 10%;
	height: 10%;
	top: 35%;
	left: 31%;
	border-radius: 50%;
	z-index: 3;
}

.eye-right {
	position: absolute;
	background: black;
	width: 10%;
	height: 10%;
	top: 35%;
	right: 31%;
	border-radius: 50%;
	z-index: 3;
}

.pupil {
	position: absolute;
	width: 38%;
	height: 35%;
	top: 35%;
	left: 20%;
	border-radius: 50%;
	background: white;
}

.nose {
	width: 55px;
	height: 30px;
	background-color: #feb236;
	border-radius: 90% 90% 80% 90%;
	position: absolute;
	top: 45%;
	left: 40%;
	z-index: 1;
}

@-webkit-keyframes action {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px);
	}
}
@keyframes action {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px);
	}
}

.snowflake {
	color: #fff;
	font-size: 1em;
	font-family: Arial, sans-serif;
	text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}
@-webkit-keyframes snowflakes-shake {
	0%,
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	50% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px);
	}
}
@keyframes snowflakes-fall {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}
@keyframes snowflakes-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(80px);
	}
}
.snowflake {
	position: fixed;
	top: -10%;
	z-index: 9999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	-webkit-animation-name: snowflakes-fall, snowflakes-.........完整代码请登录后点击上方下载按钮下载查看