<!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>纯CSS画的鹦鹉图案动画</title>
<style>
body {
background-color: #f58e54;
}
.parrot {
width: 125px;
height: 185px;
margin: auto;
position: relative;
left: 0;
top: 110px;
animation: waggon 1s linear infinite alternate;
}
.parrotBody {
width: 100%;
height: 100%;
border-radius: 150px 150px 0 220px;
background: #6bcc59;
}
.parrotHead {
width: 100%;
height: 125px;
border-radius: 50%;
position: relative;
animation: head 20s linear infinite;
animation-delay: 1s;
background: #e4fa40;
}
.parrotHead>.eye {
width: 12px;
height: 12px;
background: #1f404f;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-100%);
animation: 5s wink linear infinite;
}
.parrotHead>.eye:after {
content: '';
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
display: block;
}
.parrotHead>.eyeLeft {
left: 0;
}
.parrotHead>.eyeRight {
right: 50px;
}
.parrotNose {
width: 35px;
height: 35px;
position: absolute;
top: 70px;
left: 20px;
border-radius: 0 0 0 100%;
animation: nose 10s linear infinite;
background: #f69358;
}
.parrotNose>.nostril {
width: 50%;
height: 19px;
position: absolute;
top: -10px;
background: #6ab1ff;
}
.parrotNose>.nostril:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #1f414d;
}
.parrotNose>.nostrilLeft {
border-radius: 50% 0 50% 50%;
left: 0;
}
.parrotNose>.nostrilRight {
border-radius: 0 50% 50% 50%;
right: 0;
}
.parrotTail {
width: 30px;
height: 170px;
position: absolute;
right: 0;
bottom: -170px;
border-radius: 0 0 0 100%/0 0 0 25%;
background: #68c956;
}
.parrotTail:after {
width: 15px;
height: 0;
content: "";
position: absolute;
top: 30px;
left: 0;
border-top: 15px solid #17784f;
border-left: 15px solid transparent;
border-right: 0 solid transparent;
}
.parrotLump {
width: 90px;
height: 110px;
position: absolute;
right: 0;
bottom: 0;
overflow: hidden;
}
.parrotLumpContainer {
display: table;
width: 100%;
margin-bottom: 5px;
position: relative;
right: -15px;
}
.parrotLumpContainer:nth-child(4),
.parrotLumpContainer:nth-child(6) {
right: -5px;
}
.parrotLump-item {
float: right;
width: 20px;
height: 10px;
background: #17784f;
margin-right: 2px;
border-radius: 0 0 100% 100%/0 0 200% 200%;
}
.rocker {
width: 265px;
height: 364px;
position: absolute;
left: 50%;
top: -150px;
margin-left: -132.5px;
}
.rockerRope {
width: 5px;
background: #f9c0ad;
height: 100%;
position: absolute;
}
.rockerRope--left {
left: 30px;
}
.rockerRope--right {
right: 30px;
}
.rockerPillow {
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
background: #deca51;
border-radius: 30px/30px;
}
.rockerPillow:after {
content: "";
width: 30px;
height: 30px;
background: #fff9bf;
box-sizing: border-box;
border-radius: 50%;
border: 4px solid #d8e282;
position: absolute;
right: 0;
}
@-moz-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-webkit-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-o-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-moz-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-webkit-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-o-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-moz-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-webkit-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-o-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-moz-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@-webkit-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@-o-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
</style>
</head>
<body>
<div class="parrot">
<div class="parrotBody">
<div class="parrotHead">
<div class="eye eyeLeft"></div>
<
纯CSS3绘制的鹦鹉图案动画特效源码.zip （1个子文件） 
132689880406442014 
index.html 10KB资源评论
易小侠
- 粉丝: 6562
- 资源: 9万+
最新资源
- C#-WPF-MVVM大屏看板3D立体可视化大屏监控源码 1，WPF编程设计； 2，自定义工业控件设计； 3，数据库设计； 4
- comsol扭转MoO3完美圆二向色
- 医患档案管理系统.zip
- Java面向对象游戏开发演示详解（详解）（人气）（文）
- Python安装指南PDF
- IO扩展芯片简介及其模块定义
- 一款好看的即将跳转界面源码一款好看的即将跳转界面源码一款好看的即将跳转界面源码一款好看的即将跳转界面源码一款好看的即将跳转界面源
- 基于永磁同步电机旋转高频信号注入法零低速无位置控制仿真 1相比高频方波信号注入法，旋转高频信号注入法噪声更小损耗更低 2
- Mysql和Oracle的50个区别PDF
- Comsol仿真-相场法多晶铁电体介电击穿模拟 复现参考文献：Revisiting the Dielectric Breakd
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
