纯css布局实现一个烤面包机效果-html代码-BFW代码库

纯css布局实现一个烤面包机效果

代码语言：html

代码描述：纯css布局实现一个烤面包机效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
        margin: 0;
        padding: 0;
        background-color: #ffdb60;
      }

      .mycanvas {
        height: 510px;
        width: 350px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .toaster {
        background-color: #5abff2;
        height: 90px;
        width: 120px;
        position: relative;
        top: 210px;
        left: 125px;
        border-top-right-radius: 20px;
        background-repeat: 20px 25px 0 0;
      }

      .cover {
        background-color: #99ddff;
        height: 90px;
        width: 120px;
        border-radius: 20px 25px 0 0;
        position: relative;
        right: 30px;
      }

      .b1,
      .b2 {
        background-color: #737373;
        width: 12px;
        height: 12px;
        background-repeat: 50%;
        border-radius: 50%;
        position: relative;
      }

      .b1 {
        top: 20px;
        left: 50px;
      }

      .b2 {
        top: 25px;
        left: 50px;
      }

      .b3 {
        background-color: #5abff2;
        height: 16px;
        width: 16px;
        position: relative;
        top: 30px;
        left: 46.5px;
        border-radius: 50%;
        border: 2px solid white;
      }

      .shine {
        position: relative;
        height: 24px;
        width: 15px;
        background-color: #e6f7ff;
        border-radius: 50%;
        position: relative;
        transform: rotate(30deg);
        bottom: 35px;
        left: 7px;
      }

 .slot-1
 {
     position: relative;
     width: 10px;
     height: 50px;
     background-color: #666666;
     top: -50px;
     left: 130px;
     border-radius: 20%;
 }
      .handle1 {
        background-color: #fff;
        height: 5px;
        width: 20px;
        position: relative;
        left: 135px;
        top: -90px;
        animation: 4s move infinite;
      }

      @keyframes move {
        50% {
          transform: translateY(31px);
        }
      }

      .handle2 {
        position: relative;
        background-color: #666666;
        height: 10px;
        width: 18px;
        border-radius: 5px;
        left: 7.5px;
        bottom: 2px;
      }

      .handle3 {
        position: relative;
        background-color: #333333;
        height: 9.5px;
        width: 8px;
        border-radius: 50%;
        left: 16.5px;
        bottom: 12px;
      }

      .base1 {
        background-color: #666666;
        width: 128px;
        height: 10px;
        border-radius: 15px;
        position: relative;
        bottom: 20px;
        right: 33px;
      }

      .base2 {
        background-color: #333333;
        width: 30px;
        height: 10px;
        border-radius: 15px;
        position: relative;
        bottom: 10px;
        left: 91.5px;
      }

      .l1,
      .l2,
      .l3,
      .l4 {
        height: 7px;
        width: 8px;
        background-color: #333333;
        position: relative;
      }

      .l1 {
        bottom: 20px;
        right: 20px;
      }

      .l2 {
        bottom: 27px;
        left: 10px;
      }

      .l3 {
        bottom: 34px;
        left: 80px;
      }
.........完整代码请登录后点击上方下载按钮下载查看