<!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>
body {
width: 100%;
height: 100%;
background-color: #561;
}
.cat {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 40%;
height: 0;
padding-bottom: 35%;
margin: auto;
background-color: #FFF7EA;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.05) -4px -6px 0 4px, inset rgba(0, 0, 0, 0.05) -8px -10px 0 8px, rgba(0, 0, 0, 0.2) 4px 6px 0 2px, rgba(0, 0, 0, 0.1) 4px 10px 0 6px;
-webkit-animation: head-turn 7s ease-in-out alternate infinite;
animation: head-turn 7s ease-in-out alternate infinite;
}
.ear {
position: absolute;
top: -15%;
width: 45%;
height: 50%;
background: #FFF7EA;
z-index: -1;
}
.ear:before {
content: "";
position: absolute;
bottom: 22%;
width: 60%;
height: 60%;
background: #f4e0dc;
}
.ear:after {
content: "";
position: absolute;
bottom: 15%;
width: 60%;
height: 40%;
background: #FFF7EA;
border-radius: 100%;
}
.ear.left {
left: -5%;
border-radius: 100% 10%;
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
box-shadow: inset #FFF7EA 6px -12px 0 6px, inset rgba(0, 0, 0, 0.05) -8px -4px 0 2px, inset rgba(0, 0, 0, 0.05) -4px 10px 0 4px;
}
.ear.left:before {
left: 18%;
border-radius: 100% 10%;
box-shadow: inset rgba(0, 0, 0, 0.05) 2px -10px 0 4px;
}
.ear.left:after {
left: 12%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.ear.right {
right: -5%;
border-radius: 10% 100%;
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
box-shadow: inset rgba(0, 0, 0, 0.05) 4px 8px 0 2px, inset rgba(0, 0, 0, 0.05) 4px 14px 0 4px;
}
.ear.right:before {
right: 18%;
border-radius: 10% 100%;
box-shadow: inset rgba(0, 0, 0, 0.05) -2px 6px 0 4px;
}
.ear.right:after {
right: 12%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.eye {
position: absolute;
top: 20%;
width: 28%;
height: 40%;
background: black;
}
.eye:before {
content: "";
position: absolute;
top: 25%;
right: 5%;
width: 25%;
height: 20%;
background-color: #FFF7EA;
border-radius: 100%;
-webkit-animation: twitch 0.1s linear infinite alternate;
animation: twitch 0.1s linear infinite alternate;
}
.eye:after {
content: "";
position: absolute;
top: 45%;
right: 28%;
width: 10%;
height: 8%;
background-color: #FFF7EA;
border-radius: 100%;
-webkit-animation: twitch 0.12s linear alternate infinite;
animation: twitch 0.12s linear alternate infinite;
}
.eye.left {
left: 15%;
border-radius: 100% 100% 80% 100%;
box-shadow: inset #FFF7EA 6px 0 0 0px, inset #67523c 14px -2px 0 0, black -2px 1px 0 1px;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.eye.left:before {
right: 8%;
}
.eye.left:after {
right: 30%;
}
.eye.right {
right: 15%;
border-radius: 100% 100% 100% 80%;
box-shadow: inset #FFF7EA -6px 0 0 0px, inset #67523c -14px -2px 0 0, black 2px 1px 0 1px;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.eye.right:before {
left: 8%;
}
.eye.right:after {
left: 30%;
}
.lash {
position: absolute;
top: 2%;
width: 12%;
height: 16%;
border-radius: 100%;
}
.lash:after {
content: "";
position: absolute;
top: 30%;
width: 60%;
height: 80%;
border-radius: 100%;
}
.left .lash {
left: -2%;
box-shadow: black -4px 2px 0;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.left .lash:after {
left: -115%;
box-shadow: black -3px 4px 0;
}
.right .lash {
right: -2%;
box-shadow: black 4px 2px 0;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.right .lash:after {
right: -115%;
box-shadow: black 3px 4px 0;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.shine {
position: absolute;
bottom: 15%;
width: 35%;
height: 15%;
background: #FFF7EA;
}
.left .shine {
left: 15%;
border-radius: 100% 20%;
}
.right .shine {
right: 15%;
border-radius: 20% 100%;
}
.nose {
position: absolute;
top: 60%;
right: 0;
left: 0;
margin: auto;
background: #cbb8a4;
width: 8%;
height: 6%;
border-radius: 100% 100% 100px 100px;
box-shadow: inset rgba(0, 0, 0, 0.05) -4px -2px 0 2px, rgba(0, 0, 0, 0.1) 2px 2px 0 0;
z-index: 2;
}
.mouth {
position: absolute;
right: 0;
bottom: 12%;
left: 0;
margin: auto;
width: 15%;
height: 15%;
background: #FF0066;
border-radius: 100%;
z-index: 1;
box-shadow: inset rgba(0, 0, 0, 0.6) 0 16px 0 0, inset rgba(0, 0, 0, 0.2) 0 20px 0 2px, inset rgba(0, 0, 0, 0.05) 0 20px 0 6px;
-webkit-animation: breathe-in 2s ease-out infinite;
animation: breathe-in 2s ease-out infinite;
}
.mouth:before,
.mouth:after {
content: "";
position: absolute;
top: -35%;
width: 75%;
height: 65%;
background: #FFF7EA;
border-radius: 100%;
-webkit-animation: breathe-out 2s ease-out infinite;
animation: breathe-out 2s ease-out infinite;
}
.mouth:before {
left: -22%;
box-shadow: rgba(0, 0, 0, 0.8) -1px 3px 0;
}
.mouth:after {
right: -22%;
box-shadow: rgba(0, 0, 0, 0.8) 1px 3px 0;
}
@-webkit-keyframes twitch {
to {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
}
@keyframes twitch {
to {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
}
@-webkit-keyframes head-turn {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
15% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
25% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
40% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
60% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
70% {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
75% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
85% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
95% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes head-turn {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
15% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
25% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
40% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
60% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
70% {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
75% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
85% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
纯CSS3实现的超萌表情小猫动画效果源码.zip （1个子文件） 
132689875283391223 
index.html 9KB资源评论
易小侠
- 粉丝: 6631
- 资源: 9万+
最新资源
- java项目，毕业设计-家具商城系统
- sparse-occ-cpu.onnx
- c2532703d1b4e83f570f28ff6cf94aef_语法.pdf
- C# 将不限数量的Excel表格进行合并，支持多文件多表合并.zip
- java项目，毕业设计-体育场馆运营
- 阿里云联合中国信通院安全所发布-大模型安全研究报告2024
- 低空经济政策与产业生态研究报告（2024年）
- 基于微信小程序的手机商城的设计与实现ssm.zip
- 基于springboot汽车维修管理系统微信小程序springboot.zip
- 非常好用 的一款，网卡流量监控工具，可长时间 监控，有图标展示流量趋势，要记录一段时间 内的平均 流量，可单独记录每个网卡的流量， 绿色好用， 无功能 限制
- 基于微信小程序的医院挂号预约系统ssm.zip
- 基于机器学习的商品评论分析系统源代码+文档说明+GUI界面（高分项目）
- 基于微信小程序的校园二手交易平台ssm.zip
- 基于微信小程序的校园综合服务平台ssm.zip
- 基于微信小程序高校订餐系统的设计与开发ssm.zip
- 线性回归实现股票预测源代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
