<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 可爱的企鹅妈妈和宝宝</title>
<style>
.tufts {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
}
.tufts::before {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
content: "";
position: absolute;
}
.tufts::after {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
content: "";
position: absolute;
}
.face {
position: relative;
}
.face:before,
.face:after {
border-radius: 50%;
content: "";
display: block;
position: absolute;
}
.beak {
position: relative;
}
.beak:before {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
position: absolute;
height: 0;
width: 0;
}
.beak:after {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
position: absolute;
height: 0;
width: 0;
}
.cheeks {
position: relative;
}
.cheeks:before,
.cheeks:after {
background-color: #f2653a;
border-radius: 50%;
content: "";
display: block;
position: absolute;
z-index: 20;
}
.tummy {
position: absolute;
z-index: 10;
}
.feet:before,
.feet:after {
background-color: #fcc160;
content: "";
border-top-left-radius: 150px;
border-top-right-radius: 150px;
position: absolute;
z-index: 20;
}
.feet:before {
bottom: 0;
}
.feet:after {
bottom: 0;
}
.penguin {
position: relative;
margin: 50px 50px 0 100px;
width: 150px;
}
.penguin .tufts {
background: #36484d;
width: 5px;
height: 15px;
top: 0;
left: 72px;
}
.penguin .tufts:before {
background: #36484d;
width: 5px;
height: 20px;
top: 0;
left: -9px;
transform: rotate(-45deg);
}
.penguin .tufts:after {
background: #36484d;
width: 5px;
height: 20px;
top: 0;
left: 9px;
transform: rotate(45deg);
}
.penguin .body {
position: relative;
background: #36484d;
height: 150px;
width: 150px;
border-radius: 150px;
}
.penguin .face:before,
.penguin .face:after {
background-color: #80cfd0;
box-shadow: 0 -4px 0 #1a9ab9 inset;
width: 20px;
height: 20px;
top: 25px;
}
.penguin .face:before {
left: 45px;
}
.penguin .face:after {
right: 45px;
}
.penguin .beak:before {
border-bottom: 10px solid #f9b64c;
top: 50px;
left: 65px;
}
.penguin .beak:after {
border-top: 10px solid #c29444;
top: 60px;
left: 65px;
}
.penguin .cheeks:before,
.penguin .cheeks:after {
width: 23px;
height: 23px;
top: 45px;
z-index: 20;
}
.penguin .cheeks:before {
left: 20px;
}
.penguin .cheeks:after {
right: 20px;
}
.penguin .tummy {
border-top-left-radius: 150px;
border-top-right-radius: 150px;
background-color: #e5e1ce;
bottom: 0;
left: 46px;
height: 65px;
width: 60px;
}
.feet:before,
.feet:after {
height: 10px;
width: 20px;
}
.feet:before {
bottom: 0;
left: 40px;
}
.feet:after {
bottom: 0;
right: 40px;
}
.wings:before,
.wings:after {
content: "";
position: absolute;
z-index: -50;
}
.wings:before {
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
background: #36484d;
height: 30px;
width: 70px;
left: -50px;
top: 40%;
}
.wings:after {
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
background: #898989;
height: 30px;
width: 70px;
right: -20px;
bottom: 19px;
transform: rotate(90deg);
}
.baby-penguin {
position: relative;
margin: 50px 50px 0 50px;
width: 70px;
}
.baby-penguin .body {
position: absolute;
background: #8a8a8a;
border-radius: 150px;
height: 70px;
width: 70px;
top: -120px;
}
.baby-penguin .face:before,
.baby-penguin .face:after {
box-shadow: 0 -3px 0 #44494a inset;
width: 17px;
height: 17px;
top: -101px;
}
.baby-penguin .face:before {
left: 45px;
z-index: 30;
}
.baby-penguin .face:after {
right: 45px;
z-index: 30;
}
.baby-penguin .beak {
z-index: 30;
}
.baby-penguin .beak:after {
border-top: 10px solid #f9b64c;
top: -88px;
left: 25px;
}
.baby-penguin .cheeks:before,
.baby-penguin .cheeks:after {
width: 14px;
height: 11px;
top: -87px;
z-index: 20;
}
.baby-penguin .cheeks:before {
left: 8px;
}
.baby-penguin .cheeks:after {
right: 8px;
}
.baby-penguin .tummy {
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
background-color: #e5e1ce;
bottom: 0;
left: 8px;
height: 25px;
width: 54px;
top: -85px;
}
.baby-penguin .tummy:before {
content: "";
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background-color: #e5e1ce;
position: absolute;
width: 27px;
height: 15px;
top: -15px;
}
.baby-penguin .tummy:after {
content: "";
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background-color: #e5e1ce;
position: absolute;
width: 27px;
height: 15px;
top: -15px;
right: 0;
}
.baby-penguin .feet:before,
.baby-penguin .feet:after {
height: 7px;
width: 10px;
}
.baby-penguin .feet:before {
top: -55px;
left: 15px;
}
.baby-penguin .feet:after {
top: -55px;
right: 15px;
}
@keyframes my-baby {
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="penguin">
<div class="tufts"></div>
<div class="body">
<div class="face">
<div class="beak"></div>
<div class="cheeks"></div>
</div>
<div class="tummy"></div>
<div class="wings"></div>
</div>
<div class="feet"></div>
</div>
<div class="baby-penguin">
<div class="body"></div>
<div class="face">
<div class="beak"></div>
<div class="cheeks"></div>
</div>
<div class="tummy"></div>
<div class="feet"></div>
</div>
</body>
</html>
纯CSS3绘制可爱的企鹅妈妈和企鹅宝宝卡通效果源码.zip （1个子文件） 
132692152365698798 
index.html 6KB资源评论
易小侠
- 粉丝: 6625
- 资源: 9万+
最新资源
- 西电微机原理实验-西安电子科技大学微机原理课程实验概述与指导
- 智慧校园（校园AI 产品） 校园安全 智慧校园 教育数字化 AI校园
- 西电微机原理实验四：8255可编程并行接口的应用
- 基于 Go+Echo 开发的多房间实时通讯系统。详细文档+优秀项目+全部资料.zip
- 基于 Go + Vue 的现代化博客系统详细文档+优秀项目+全部资料.zip
- 基于 go + grpc + consul 的微服务系统详细文档+优秀项目+全部资料.zip
- 基于 golang goframe + vue3 的、前后端分离的后台管理系统快捷使用模板，支持按钮级别的 RBAC。详细文档+优秀项目+全部资料.zip
- 基于 goframe2 和vue3 开发的全栈前后端分离的后台管理系统，详细文档+优秀项目+全部资料.zip
- 基于 Golang 的 容器管理系统 API详细文档+优秀项目+全部资料.zip
- 基于 React 实现的电商后台管理系统的前端项目详细文档+优秀项目+全部资料.zip
- 基于 Golang开发的微服务网关，能够实现高性能 HTTP API 转发、服务编排、多租户管理、API 访问权限控制等目的，拥有强大的自定义插件系统可以自行扩展详细文档+优秀项目+全部资料.zip
- 基于 Vue + Go 实现客户关系管理系统，，主要功能有仪表盘、客户管理、合同管理、产品管理、配置、订阅等功能详细文档+优秀项目+全部资料.zip
- 基于beego v2.0.1框架和AdminLte前端框架，开发的go语言通用后台系统，详细文档+优秀项目+全部资料.zip
- 基于 SpringBoot + Spring + SpringMvc + Mybatis + Shiro+ Redis 开发单点登录管理系统详细文档+优秀项目+全部资料.zip
- 基于beego的简易blog系统详细文档+优秀项目+全部资料.zip
- 基于Beego开发的可切换模板的 BBS 社交博客系统、它安装简单便捷，页面简介优美。前端是HTML+JS+CSS，不需要掌握一些前端技术栈也能轻松自定义页面。详细文档+优秀项目+全部资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
