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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看