<!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: #1c2e40;
}
.centerMe {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#burger {
cursor: pointer;
width: 200px;
}
#burger > * {
margin-bottom: 9px;
}
#burger > *:last-of-type {
margin-bottom: 0;
}
#burger .bun {
background: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 5%, #f8981f 6%), -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 5%, #f8981f 6%), #f8981f;
background-position: 0 0, 10px 10px;
background-size: 25px 20px;
height: 40px;
}
#burger .bun.top {
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 700ms;
animation-delay: 700ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#burger .bun.bottom {
height: 28px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#burger .tomato {
background: #d84138;
width: 60px;
height: 14px;
border-radius: 5px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#burger .tomato:after {
position: absolute;
content: "";
display: block;
background: #d84138;
margin-left: 70px;
width: 60px;
height: 14px;
border-radius: 5px;
}
#burger .tomato:before {
position: absolute;
content: "";
display: block;
background: #d84138;
margin-left: 140px;
width: 60px;
height: 14px;
border-radius: 5px;
}
#burger .bacon {
background: #e27849;
height: 12px;
border-radius: 5px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#burger .bacon:before {
position: absolute;
content: "";
width: 40px;
height: 20px;
border-top: 12px solid #e27849;
border-radius: 100%;
-webkit-transform: translate(-46%, 1px) rotate(-30deg);
transform: translate(-46%, 1px) rotate(-30deg);
}
#burger .bacon:after {
position: absolute;
content: "";
width: 40px;
height: 20px;
border-bottom: 12px solid #e27849;
border-radius: 100%;
-webkit-transform: translate(178px, -70%) rotate(-30deg);
transform: translate(178px, -70%) rotate(-30deg);
}
#burger .cheese {
position: relative;
background: #eaa502;
height: 10px;
border-radius: 5px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 3 !important;
}
#burger .cheese:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #eaa502;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
margin-top: 9px;
left: 60%;
z-index: 2;
}
#burger .cheese:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 30px solid #1c2e40;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
margin-top: 10px;
left: calc(60% - 10px);
z-index: 1;
}
#burger .burger {
background: #844834;
background: -webkit-linear-gradient(45deg, #844834 0%, #844834 15%, #733f2e 18%, #844834 21%, #844834 38%, #733f2e 41%, #844834 44%, #844834 62%, #733f2e 66%, #844834 69%, #844834 82%, #733f2e 86%, #844834 89%, #844834 100%);
height: 36px;
border-radius: 5px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: -1 !important;
}
#burger .salad {
background: #8ac170;
height: 12px;
border-radius: 5px;
opacity: 0;
-webkit-animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
animation: just-drop 0.5s cubic-bezier(0.02, 0.75, 0.26, 1.08);
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#burger .salad:before {
position: absolute;
content: "";
width: 40px;
height: 20px;
border-top: 13px solid #8ac170;
border-radius: 100%;
-webkit-transform: translate(-46%, 0) rotate(-10deg);
transform: translate(-46%, 0) rotate(-10deg);
}
#burger .salad:after {
position: absolute;
content: "";
width: 40px;
height: 20px;
border-top: 13px solid #8ac170;
border-radius: 100%;
-webkit-transform: translate(178px, 0) rotate(10deg);
transform: translate(178px, 0) rotate(10deg);
}
@-webkit-keyframes just-drop {
0% {
margin-top: -200%;
margin-bottom: 200%;
}
10%,
100% {
opacity: 1;
}
}
@keyframes just-drop {
0% {
margin-top: -200%;
margin-bottom: 200%;
}
10%,
100% {
opacity: 1;
}
}
@-webkit-keyframes bite-me {
0%, 100% {
opacity: 1;
}
}
@keyframes bite-me {
0%, 100% {
opacity: 1;
}
}
.biteMe {
opacity: 0;
width: 100px;
height: 100px;
background: #1c2e40;
border-radius: 100%;
-webkit-transform: translate(30%, -100%) rotate(15deg);
transform: translate(30%, -100%) rotate(15deg);
-webkit-animation: bite-me .1s;
animation: bite-me .1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.biteMe:before {
content: '';
position: absolute;
width: 70px;
height: 70px;
background: #1c2e40;
border-radius: 100%;
top: 50px;
left: 50px;
}
.biteMe:after {
content: '';
position: absolute;
width: 70px;
height: 70px;
background: #1c2e40;
border-radius: 100%;
top: -20px;
left: -20px;
}
</style>
</head>
<body>
<div class='centerMe' id='burger'>
<div class='bun top'></div>
<div class='tomato'></div>
<div class='bacon'></div>
<div class='cheese'></div>
<div class='burger'></div>
<div class='salad'></div>
<div class='bun bottom'></div>
</div>
<div class='biteMe centerMe'></div>
</body>
</html>
CSS3实现被啃了一口的汉堡动画效果源码.zip （1个子文件） 
132689881792020185 
index.html 8KB资源评论
毕业_设计
- 粉丝: 1991
- 资源: 1万+
最新资源
- 1键切换，随机播放本地音乐（适合管理大量本地音乐），无需联网，珍藏版音乐软件
- canoe的log数据文件读取
- 纸检测55-YOLOv5数据集合集.rar
- 实现vue+docxtemplater导出word文档功能时，需要引入的资源文件
- 个人PPT模板，总结或者作为素材使用
- 纸板、面料、纸类、塑料检测68-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 【java源代码】基于spring+vue的音乐推荐管理（完整前后端+mysql+说明文档+LW）.zip
- 长文本c++Aes加密
- 纸和塑料检测55-YOLO（v7至v9）、Paligemma、VOC数据集合集.rar
- 烟雾明火分割数据集labelme格式5205张2类别.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
