<!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 {
background: radial-gradient(ellipse at center, rgba(206, 220, 231, 1) 0%, rgba(89, 106, 114, 1) 100%);
}
.flex-box {
display: flex;
}
#minion1 {
height: 650px;
width: 400px;
background: transparent;
position: relative;
margin: auto;
transform: scale(0.5);
}
#div_two {
height: 500px;
width: 270px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(254, 252, 234, 1) 0%, rgba(250, 224, 42, 1) 100%);
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-top-right-radius: 150px;
border-top-left-radius: 150px;
position: absolute;
bottom: 100px;
right: 70px;
}
#eye_glass {
height: 155px;
width: 155px;
border-radius: 50%;
background: linear-gradient(to left, #e7ebec, #abaeaf);
position: absolute;
top: 74px;
right: 56px;
z-index: 50;
border: 2px double #e0e0e0;
}
#inner_inner {
height: 95px;
width: 110px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 28px;
right: 20px;
z-index: 100;
}
#inner_yellow {
height: 110px;
width: 110px;
border-radius: 50%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(254, 252, 234, 1) 0%, rgba(250, 224, 42, 1) 100%);
position: absolute;
top: 20px;
right: 20px;
border: 2px block #e0e0e0;
}
#close_eye {
height: 110px;
width: 110px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 94px;
right: 78px;
z-index: 100;
animation-name: eye;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#eye {
height: 22px;
width: 22px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 37px;
right: 41px;
z-index: 100;
}
#brown_eye {
height: 45px;
width: 45px;
border-radius: 50%;
background-color: #8a7b1d;
position: absolute;
top: 25px;
right: 30px;
z-index: 100;
}
#eyeg {
height: 30px;
width: 270px;
position: relative;
top: 140px;
right: 0px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(144, 144, 144, 1) 0%, rgba(8, 8, 8, 1) 100%);
}
#eyege {
height: 7px;
width: 270px;
position: relative;
top: 12px;
right: 0px;
background-color: black;
}
#mouths {
height: 50px;
width: 150px;
background-color: transparent;
position: absolute;
bottom: 230px;
right: 60px;
border-radius: 70%;
border-bottom: 3px solid #9c9040;
}
#dress1 {
height: 100px;
width: 100%;
z-index: 100;
position: absolute;
bottom: 0px;
border-bottom-right-radius: 90px;
border-bottom-left-radius: 90px;
background: linear-gradient(to left, #619fdd, #4883b8);
border-bottom: 1px outset #6383a3;
}
#dress2 {
height: 120px;
width: 150px;
position: absolute;
bottom: 80px;
right: 58px;
background: linear-gradient(to left, #619fdd, #4883b8);
border: 2px outset #6383a3;
}
#handle1 {
height: 25px;
width: 110px;
position: absolute;
bottom: 190px;
right: -17px;
background-color: #4883b8;
border: 2px outset #6383a3;
-webkit-transform: rotate(-30deg);
border-bottom-right-radius: 40px;
}
#handle2 {
height: 25px;
width: 110px;
position: absolute;
bottom: 190px;
left: -17px;
background-color: #4883b8;
border: 2px outset #6383a3;
-webkit-transform: rotate(30deg);
border-bottom-left-radius: 40px;
}
#pocket {
height: 50px;
width: 60px;
border: 2px outset black;
position: absolute;
top: 40px;
right: 44px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#button1 {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #393831;
margin-top: 4px;
margin-left: 2px;
border: 2px inset black;
}
#button2 {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #393831;
margin-top: 4px;
margin-left: 90px;
border: 2px inset black;
}
#curve {
height: 60px;
width: 56px;
background-color: transparent;
border-left: 2px block black;
position: absolute;
bottom: 40px;
z-index: 100;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 40%;
border-right: 3px dotted black;
}
#curve2 {
height: 60px;
width: 56px;
background-color: transparent;
border-left: 2px block #073f76;
position: absolute;
bottom: 40px;
right: 0;
z-index: 100;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 40%;
border-left: 3px dotted #073f76;
}
#line {
height: 85px;
width: 5px;
background-color: transparent;
position: absolute;
bottom: 5px;
right: 130px;
z-index: 100;
border-left: 3px dotted #073f76;
}
#leg {
height: 50px;
width: 50px;
background: linear-gradient(to left, #619fdd, #4883b8);
position: absolute;
bottom: 70px;
right: 130px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 50;
}
#leg1 {
height: 50px;
width: 50px;
background: linear-gradient(to left, #619fdd, #4883b8);
position: absolute;
bottom: 70px;
left: 130px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 50;
}
#shoe {
height: 40px;
width: 70px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(144, 144, 144, 1) 0%, rgba(8, 8, 8, 1) 100%);
position: absolute;
bottom: 32px;
left: 109px;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 40%;
border-top-left-radius: 100%;
border-bottom: 5px inset black;
}
#shoe1 {
height: 40px;
width: 70px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(144, 144, 144, 1) 0%, rgba(8, 8, 8, 1) 100%);
position: absolute;
bottom: 32px;
right: 108px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 40%;
border-top-right-radius: 100%;
border-bottom: 5px inset black;
}
#hair_div {
height: 200px;
width: 270px;
position: absolute;
top: 40px;
right: 70px;
}
#hair1 {
height: 35px;
width: 15px;
position: absolute;
bottom: 120px;
left: 5px;
background-color: transparent;
border-right: 1px solid black;
border-radius: 80%;
-webkit-transform: rotate(-70deg);
}
#hair2 {
height: 40px;
width: 12px;
position: absolute;
bottom: 130px;
left: 30px;
background-color: transparent;
border-right: 1px solid black;
border-radius: 80%;
-webkit-transform: rotate(-45deg);
}
#hair3 {
height: 40px;
width: 5px;
position: absolute;
bottom: 160px;
left: 60px;
background-color: transparent;
border-right: 1px solid black;
border-radius: 50%;
-webkit-transform: rotate(-30deg);
}
#hair4 {
height: 30px;
width: 5px;
position: absolute;
bottom: 174px;
left: 70px;
background-color: transparent;
border-right: 1px solid black;
border-radius: 50%;
-webkit-transform: rotate(-45deg);
}
#hair5 {
height: 30px;
width: 5px;
position: absolute;
bottom: 175px;
left: 100px;
background-color: transparent;
border-right: 1px solid black;
border-radius: 80%;
-
CSS3 实现的小黄人眨眼动画效果源码.zip
版权申诉
181 浏览量
2022-10-31
01:46:53
上传
评论
收藏 3KB ZIP 举报
CSS3 实现的小黄人眨眼动画效果源码.zip （1个子文件） 
132689968760885731 
index.html 28KB资源评论
毕业_设计
- 粉丝: 1936
- 资源: 1万+
最新资源
- 萤石云固件CS-XP1-8B4WF
- HTML5小游戏【农场连连看-优秀H5小游戏合集】游戏源码分享下载 - farm.zip
- 基于Python的酒店评论情感分析源码+文档（高分项目）.zip
- meta-llama-3-8b-instruct 的 model-00003-of-00004.safetensors 的3/3
- nginx配置文件，注意其中需要对应宿主机的路径
- 自用数据集自用数据集自用数据集
- HTML5小游戏【堆雪人-优秀H5小游戏合集】游戏源码分享下载 - epicsnowman.zip
- SNMP Client 是SNMP测试工具
- Android Camera内存统计脚本
- AD9220高速数据芯片硬件参考设计原理图+STM32F103单片机驱动程序代码+芯片技术手册资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
