用 CSS 画个企鹅呀 ~

本文通过CSS详细讲解如何创建一个企鹅的图形,包括头部、脸部、眼睛、腮红、嘴巴、身体、四肢等部分,利用border-radius塑造形状,并用keyframes实现手部的上下移动动画效果。
摘要由CSDN通过智能技术生成

今天主要是用 css 画一个企鹅 ~

在这里插入图片描述

html

<div class="penguin">
	<!-- 头部 -->
	<div class="penguin-top">
		<!-- 脸 -->
		<p class="left-beak"></p>
		<p class="right-beak"></p>
		<!-- 眼睛 -->
		<div class="left-eye">
			<p class="eyeball"></p>
		</div>
		<div class="right-eye">
			<p class="eyeball"></p>
		</div>
		<!-- 腮红 -->
		<p class="left-blush"></p>
		<p class="right-blush"></p>
		<!-- 嘴巴 -->
		<p class="top-mouth"></p>
		<p class="bottom-mouth"></p>
	</div>
	<!-- 身体 -->
	<p class="belly"></p>
	<!-- 四肢 -->
	<div class="penguin-bottom">
		<!-- 手 -->
		<p class="left-hand"></p>
		<p class="right-hand"></p>
		<!-- 脚 -->
		<p class="left-foot"></p>
		<p class="right-foot"></p>
	</div>
</div>
* {
   
	margin: 0;
	padding: 0;
	border: none;
}

body {
   
	background-color: #C6FAF1;
}

.penguin {
   
	width: 300px;
	height: 300px;
	margin: 5% auto 0;
	text-align: center;
	position: relative;
}

头部:

.penguin-top {
   
	width: 160px;
	height: 130px;
	background-color: #000;
	border-radius: 60% 55% 50% 50%;
	display: inline-block;
	margin-top: 20px;
}

脸部:

.left-beak {
   
	width: 100px;
	height: 95px;
	background-color: #808080;
	border-radius: 50%;
	position: absolute;
	top: 13%;
	left: 25%;
	z-index: 1;
}

.right-beak {
   
	width
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值