css布局实现一个微波炉加热食物动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现一个微波炉加热食物动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">


  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap");
@font-face {
  font-family: "Digital 7";
  src: url("https://assets.codepen.io/450456/digital-7.woff");
}
html,
body {
  height: 100%;
  position: relative;
}

* {
  position: absolute;
}

.scene {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
}
.scene::after {
  content: "";
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
}

.title {
  user-select: none;
  position: absolute;
  font-family: "Major Mono Display", monospace;
  color: white;
  top: 16px;
  left: 16px;
  right: 100px;
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-spacing: -5px;
  letter-spacing: -1.5px;
  padding-bottom: 15px;
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
}
.title small {
  font-size: 16px;
  position: absolute;
  top: 120%;
  left: 0;
}
.title::before {
  content: "";
  position: absolute;
  bottom: 0;
  opacity: 0.25;
  left: 0px;
  height: 3px;
  width: 87px;
  background: white;
}

.disclaimer {
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-size: 14px;
  font-family: "Major Mono Display", sans-serif;
  color: white;
  z-index: 10;
}
.disclaimer a {
  color: white;
  margin-left: 5px;
}

.microwave {
  top: 50%;
  transform: translateY(-50%);
  left: 15vw;
  right: 15vw;
  height: 40vw;
  border-radius: 10px;
  background: linear-gradient(to top, #737373 0%, #afafaf 5%, #d7d7d7 15%, #e1e1e1 20%, whitesmoke 55%, #ebebeb 80%, #ebebeb 93%, white 97%, #ebebeb 100%);
}
.microwave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, #000 0%, #fff 1%, #fff 97%, #000 100%);
  opacity: 0.1;
  border-radius: 10px;
}
.microwave__shadow {
  top: calc(100% + 1.45vw);
  width: 120%;
  left: -10%;
  height: 1.6vw;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
}
.microwave__bottom {
  top: 100%;
  left: 10px;
  right: 10px;
  height: 1.3vw;
}
.microwave__bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: -0.5px;
  height: 100%;
  background: linear-gradient(to top, #000 0%, #232323 50%, dimgray 90%, #000 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.microwave__bottom__foot {
  top: 1px;
  left: 15%;
  width: 10%;
  height: 2vw;
  background: linear-gradient(to bottom, #000 0%, #232323 70%, dimgray 90%, #000 100%);
  border-radius: 50px;
}
.microwave__bottom__foot + .microwave__bottom__foot {
  left: auto;
  right: 15%;
}
.microwave__door {
  top: 0;
  left: 0;
  bottom: 0;
  width: 70%;
  border-radius: 15px 0 0 15px;
  z-index: 1;
}
.microwave__door__inner {
  top: 13%;
  left: 11%;
  right: 11%;
  bottom: 13%;
  background: #373737;
  box-shadow: inset 0px 0px 2vw rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
.microwave__door__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -1px;
  transform: translate(50%, -50%);
  width: 5vw;
  height: 10vw;
  border-radius: 100%;
  background: linear-gradient(to top, #7d7d7d 0%, #afafaf 10%, #f2f2f2 45%, white 75%, #e1e1e1 100%);
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
.microwave__door__inner::before {
  content: "";
  position: absolute;
  top: -0.25vw;
  left: -0.25vw;
  right: -0.25vw;
  bottom: -0.25vw;
  border-radius: 12px;
  background: linear-gradient(to bottom, #0f0f0f 0%, white 100%);
  opacity: 0.15;
}
.microwave__door__window {
  top: 18%;
  left: 15%;
  right: 15%;
  bottom: 18%;
  box-shadow: 0px 1px 0 rgba(255, 255, 255, 0.15), inset 0px 0px 2vw rgba(0, 0, 0, 0.6), 0px -1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom, #4b5053 0%, #2d2d2d 100%);
  border-radius: 5px;
  overflow: hidden;
  transition: 400ms;
}
.microwave__door__mesh {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIi8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIi8+Cjwvc3ZnPgo=");
  background-size: 2vw;
  opacity: 0.1;
  border-radius: 5px;
}
.microwave__side {
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  border-radius: 0 15px 15px 0;
  z-index: 1;
}
.microwave__side::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 0.4vw;
  opacity: 0.7;
  background: linear-gradient(to right, #000 40%, #777 45%, #777 50%, #777 75%, #000 80%);
  mix-blend-mode: multiply;
}
.microwave__side::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 0.4vw);
  width: 0.3vw;
  opacity: 0.7;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 40%);
}
.microwave__side__blend {
  z-index: 2;
  right: 100%;
  width: 0.7vw;
  background: linear-gradient(to bottom, #ebebeb 0%, rgba(255, 255, 255, 0) 10%);
  top: 0;
  bottom: 0;
}
.microwave__clock {
  top: 15%;
  height: 20%;
  background: black;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, #0d0d0d 0%, #0d0d0d 4%, #383838 5%, #383838 15%, #2d2d2d 16%, #2d2d2d 50%, #222222 51%, #222222 90%, #2c2c2c 91%, #2c2c2c 100%);
}
.microwave__clock__time {
  user-select: none;
  color: #18a018;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Digital 7";
  font-size: 4vw;
  text-shadow: 0px 0px 5px rgba(0, 128, 0, 0.75);
  opacity: 0;
}
.microwave__clock__time::before {
  content: "00:00";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
}
.microwave__dial {
  width: 60%;
  padding-top: 60%;
  background: linear-gradient(to top, white 30%,.........完整代码请登录后点击上方下载按钮下载查看