CSS挥手的小企鹅

写bug断了电

于 2022-03-28 14:54:00 发布

阅读量190

点赞数

分类专栏： CSS样式文章标签： css html

本文链接：https://blog.csdn.net/fyydashen/article/details/123795062

版权

CSS样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果一

代码一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>睁眼小企鹅</title>
		<style>
			.penguin {
				--penguin-skin: black;
				position: relative;
				margin: auto;
				display: block;
				margin-top: 5%;
				width: 300px;
				height: 300px;
			}

			.penguin-top {
				top: 10%;
				left: 25%;
				background: var(--penguin-skin);
				width: 50%;
				height: 45%;
				border-radius: 70% 70% 60% 60%;
			}

			.penguin-bottom {
				top: 40%;
				left: 23.5%;
				background: var(--penguin-skin);
				width: 53%;
				height: 45%;
				border-radius: 70% 70% 100% 100%;
			}

			.right-hand {
				top: 0%;
				left: -5%;
				background: var(--penguin-skin);
				width: 30%;
				height: 60%;
				border-radius: 30% 30% 120% 30%;
				transform: rotate(45deg);
				z-index: -1;
			}

			.left-hand {
				top: 0%;
				left: 75%;
				background: var(--penguin-skin);
				width: 30%;
				height: 60%;
				border-radius: 30% 30% 30% 120%;
				transform: rotate(-45deg);
				z-index: -1;
			}

			.right-cheek {
				top: 15%;
				left: 35%;
				background: white;
				width: 60%;
				height: 70%;
				border-radius: 70% 70% 60% 60%;
			}

			.left-cheek {
				top: 15%;
				left: 5%;
				background: white;
				width: 60%;
				height: 70%;
				border-radius: 70% 70% 60% 60%;
			}

			.belly {
				top: 60%;
				left: 2.5%;
				background: white;
				width: 95%;
				height: 100%;
				border-radius: 120% 120% 100% 100%;
			}

			.right-feet {
				top: 85%;
				left: 60%;
				background: orange;
				width: 15%;
				height: 30%;
				border-radius: 50% 50% 50% 50%;
				transform: rotate(-80deg);
		 	z-index: -2222;
			}

			.left-feet {
				top: 85%;
				left: 25%;
				background: orange;
				width: 15%;
				height: 30%;
				border-radius: 50% 50% 50% 50%;
				transform: rotate(80deg);
				z-index: -2222;
			}

			.right-eye {
				top: 45%;
				left: 60%;
				background: black;
				width: 15%;
				height: 17%;
				border-radius: 50%;
			}

			.left-eye {
				top: 45%;
				left: 25%;
				background: black;
				width: 15%;
				height: 17%;
				border-radius: 50%;
			}

			.sparkle {
				top: 25%;
				left: 15%;
				background: white;
				width: 35%;
				height: 35%;
				border-radius: 50%;
			}

			.blush-right {
				top: 65%;
				left: 15%;
				background: pink;
				width: 15%;
				height: 10%;
				border-radius: 50%;
			}

			.blush-left {
				top: 65%;
				left: 70%;
				background: pink;
				width: 15%;
				height: 10%;
				border-radius: 50%;
			}

			.beak-top {
				top: 60%;
				left: 40%;
				background: orange;
				width: 20%;
				height: 10%;
				border-radius: 50%;
			}

			.beak-bottom {
				top: 65%;
				left: 42%;
				background: orange;
				width: 16%;
				height: 10%;
		 	border-radius: 50%;
			}

			body {
				background: #c6faf1;
			}

			.penguin * {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="penguin">
			<div class="penguin-bottom">
				<div class="right-hand"></div>
				<div class="left-hand"></div>
				<div class="right-feet"></div>
				<div class="left-feet"></div>
			</div>
			<div class="penguin-top">
				<div class="right-cheek"></div>
				<div class="left-cheek"></div>
				<div class="belly"></div>
				<div class="right-eye">
					<div class="sparkle"></div>
				</div>
				<div class="left-eye">
					<div class="sparkle"></div>
				</div>
				<div class="blush-right"></div>
				<div class="blush-left"></div>
				<div class="beak-top"></div>
				<div class="beak-bottom"></div>
			</div>
		</div>
	</body>
</html>

效果二

代码二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>挤眼挥手小企鹅</title>
		<style>
			:root {
				--penguin-size: 300px;
				--penguin-skin: gray;
				--penguin-belly: white;
				--penguin-beak: orange;
			}

			@media (max-width: 350px) {
				:root {
					--penguin-size: 200px;
					--penguin-skin: black;
				}
			}

			.penguin {
				position: relative;
				margin: auto;
				display: block;
				margin-top: 5%;
				width: var(--penguin-size, 300px);
				height: var(--penguin-size, 300px);
			}

			.right-cheek {
				top: 15%;
				left: 35%;
				background: var(--penguin-belly, white);
				width: 60%;
				height: 70%;
				border-radius: 70% 70% 60% 60%;
			}

			.left-cheek {
				top: 15%;
				left: 5%;
				background: var(--penguin-belly, white);
				width: 60%;
				height: 70%;
				border-radius: 70% 70% 60% 60%;
			}

			.belly {
				top: 60%;
				left: 2.5%;
				background: var(--penguin-belly, white);
				width: 95%;
				height: 100%;
				border-radius: 120% 120% 100% 100%;
			}

			.penguin-top {
				top: 10%;
				left: 25%;
				background: var(--penguin-skin, gray);
				width: 50%;
				height: 45%;
				border-radius: 70% 70% 60% 60%;
			}

			.penguin-bottom {
				top: 40%;
				left: 23.5%;
				background: var(--penguin-skin, gray);
				width: 53%;
				height: 45%;
				border-radius: 70% 70% 100% 100%;
			}

			.right-hand {
				top: 5%;
				left: 25%;
				background: var(--penguin-skin, black);
				width: 30%;
				height: 60%;
				border-radius: 30% 30% 120% 30%;
				transform: rotate(130deg);
				z-index: -1;
				animation-duration: 3s;
				animation-name: wave;
				animation-iteration-count: infinite;
				transform-origin: 0% 0%;
				animation-timing-function: linear;
			}

			@keyframes wave {
				10% {
					transform: rotate(110deg);
				}

				20% {
					transform: rotate(130deg);
				}

				30% {
					transform: rotate(110deg);
				}

				40% {
					transform: rotate(130deg);
				}
			}

			.left-hand {
				top: 0%;
				left: 75%;
				background: var(--penguin-skin, gray);
				width: 30%;
				height: 60%;
				border-radius: 30% 30% 30% 120%;
				transform: rotate(-45deg);
				z-index: -1;
			}

			.right-feet {
				top: 85%;
				left: 60%;
				background: var(--penguin-beak, orange);
				width: 15%;
				height: 30%;
				border-radius: 50% 50% 50% 50%;
				transform: rotate(-80deg);
				z-index: -2222;
			}

			.left-feet {
				top: 85%;
				left: 25%;
				background: var(--penguin-beak, orange);
				width: 15%;
				height: 30%;
				border-radius: 50% 50% 50% 50%;
				transform: rotate(80deg);
				z-index: -2222;
			}

			.right-eye {
				top: 45%;
				left: 60%;
				background: black;
				width: 15%;
				height: 17%;
				border-radius: 50%;
			}

			.left-eye {
				top: 45%;
				left: 25%;
				background: black;
				width: 15%;
				height: 17%;
				border-radius: 50%;
			}

			.sparkle {
				top: 25%;
				left: -23%;
				background: white;
				width: 150%;
				height: 100%;
				border-radius: 50%;
			}

			.blush-right {
				top: 65%;
				left: 15%;
				background: pink;
				width: 15%;
				height: 10%;
				border-radius: 50%;
			}

			.blush-left {
				top: 65%;
				left: 70%;
				background: pink;
				width: 15%;
				height: 10%;
				border-radius: 50%;
			}

			.beak-top {
				top: 60%;
				left: 40%;
				background: var(--penguin-beak, orange);
				width: 20%;
				height: 10%;
				border-radius: 50%;
			}

			.beak-bottom {
				top: 65%;
				left: 42%;
				background: var(--penguin-beak, orange);
				width: 16%;
				height: 10%;
				border-radius: 50%;
			}

			body {
				background: #c6faf1;
			}

			.penguin * {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="penguin">
			<div class="penguin-bottom">
				<div class="right-hand"></div>
				<div class="left-hand"></div>
				<div class="right-feet"></div>
				<div class="left-feet"></div>
			</div>
			<div class="penguin-top">
				<div class="right-cheek"></div>
				<div class="left-cheek"></div>
				<div class="belly"></div>
				<div class="right-eye">
					<div class="sparkle"></div>
				</div>
				<div class="left-eye">
					<div class="sparkle"></div>
				</div>
				<div class="blush-right"></div>
				<div class="blush-left"></div>
				<div class="beak-top"></div>
				<div class="beak-bottom"></div>
			</div>
		</div>
	</body>
</html>

源代码来自：基础 CSS: 使用媒体查询更改变量 | freeCodeCamp.org

写bug断了电

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS挥手的小企鹅

效果一代码一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>睁眼小企鹅</title> <style> .penguin { --penguin-skin: black; position: relative; margin: auto; display: block; margi
复制链接

扫一扫