css+js实现面包机交互操作动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+js实现面包机交互操作动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Poppins;
    background: radial-gradient(circle at 50% 70%, rgb(248, 236, 217) 0%, rgba(106,91,69,1) 100%);

    font-size: calc(var(--_size) * 0.01);
    --_factor: min(600px, 80vh);
    --_size: min(var(--_factor), 80vw);

    --base-clr: #b7b5b4;

    --toast-time: 0s;
}

.toaster-container {
    position: relative;
    width: 100em;
    height: 100em;
}
.toaster-container * {
    position: absolute; margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
}
.toaster-clip {
    width: 117.2%;
    height: 10%;
    scale: 2 2.5;
    left: -4%;
    bottom: -34%;
    border-radius: 5%;
    transform: skewx(283.1deg) rotate(7.6deg);
    overflow: hidden;
}
.inset-toaster {
    width: 27.8%;
    height: 276%;
    right: 0.4%;
    top: 4%;
    transform: rotate(-7.6deg) skewx(76.1deg) rotate(-13.7deg);
    border-radius: 7%;
    overflow: hidden;
}
.inset-toaster.btm .inset-inset-toaster{
    background: transparent;
    translate: 0 -2.4em;
}
.inset-toaster.btm .inset-inset-toaster::before {
    width: 100%; height: 100%;
    content: ''; display: block;
    border-radius: 5%;
    box-shadow: 
    inset 0 -0.2em 0.1em 0 #fff5,
    0 1.8em 0.2em -0.2em rgba(0, 0, 0, 0.1),
    -0.3em 0.4em 0.2em -0.3em rgb(26, 26, 26),
    -0.3em 2em 0.4em -0.4em rgb(77, 77, 77),
    0 2.1em 0 0 rgb(51, 51, 51);
}
.inset-toaster.btm .inset-inset-toaster::after {
    width: 48%; height: 21%;
    content: '';
    display: block;
    position: absolute;
    left: 53%;
    top: 66%;
    border-radius: 22%;
    transform: rotate(336deg);
    box-shadow: 
    inset 0 -0.4em 0.1em -0.2em #fff5, 
    0em 0.32em 0.1em -0.2em rgba(26, 26, 26,0.8), 
    -0.3em 2em 0.4em -0.4em rgb(77, 77, 77), 
    0 2.4em 0 -0.4em rgb(51, 51, 51);
    clip-path: polygon(10% -100%, 200% -100%, 200% 200%, -4% 200%);
}
.inset-inset-toaster {
    background: rgba(96,96,96,1);
    background: linear-gradient(157deg, 
    rgb(68,68,68) 18%, 
    rgb(96,96,96) 28%,
    rgb(96,96,96) 32%, 
    rgb(111,111,111) 34%, 
    rgb(189, 189, 189) 41%, 
    rgb(189, 189, 189) 42%, 
    rgb(59, 59, 59) 47%, 
    rgb(59, 59, 59) 48%, 
    rgb(90, 88, 87) 52%, 
    rgb(223,211,197) 76%); 
    width: 115.9%;
    height: 77.4%;
    bottom: 3%;
    left: -7.9%;
    border-radius: 10%;
    transform: rotate(30deg) skewx(30.4deg);
}
.side-piece {
    background: #8b8782;
    background: linear-gradient(180deg, 
    rgb(58, 58, 58) 0%, 
    rgb(59, 59, 59) 7%, 
    rgb(90, 88, 87) 16%, 
    rgb(223,211,197) 81%,
    rgb(223,211,197) 90%,
    rgb(53 53 53) 100%);
    width: 72.9%;
    height: 51.8%;
    bottom: 1%;
    left: -37%;
    border-radius: 14%;
    transform: rotate(30deg) skewx(29.5deg);
    box-shadow: 
    -0.1em -1em 0.2em -1em #fff9,
    -0.1em -1em 0.7em -1em #0009,
    0 -1em 1em -1em #000,
    inset 1em 0 1em -1.2em #000,
    inset 0.1em 1em 0.2em -1em #fff9,
    inset 4em -1em 3em -3em #fff8,
    inset 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.2),
    inset 0 2.1em 0.4em -2em rgba(0, 0, 0, 0.4),
    inset 0 2em 5em 4em rgba(0, 0, 0, 0.2);
}
.side-piece::before {
    width: 10%; height: 94%;
    content: '';
    display: block;
    position: absolute;
    filter: blur(0.4em);
    background: linear-gradient(0deg, transparent 0%, rgb(59, 59, 59) 90%),
    linear-gradient(90deg, #fff 0%,rgb(104, 102, 102) 50%, #fff 100%);
    bottom: 1%;
    right: -3%;
}
.toaster-front {
    width: 26%; height: 36%;
    left: 49%;
    top: 48%;
    transform: rotateZ(-18deg) skew(-18deg);
}
.toaster-front.........完整代码请登录后点击上方下载按钮下载查看