css布局实现一个面包机烤面包动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现一个面包机烤面包动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background: #f5f5f5; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; } .oven { width: 40vw; display: flex; align-items: center; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .back { width: 89%; background: #65c7bf; height: 6vw; border-top-right-radius: 2.5vw; border-top-left-radius: 2.5vw; } .top_holder { width: 100%; height: 10vw; perspective: 60vw; margin-top: -5vw; overflow: hidden; } .top { width: 100%; background: #5cada6; height: 20vw; transform: rotateX(50deg); } .front { width: 100%; background: #65c7bf; height: 35vw; border-radius: 1vw; margin-top: -1vw; z-index: 4; overflow: hidden; flex-direction: column; justify-content: space-between; align-items: center; position: relative; display: flex; padding: 2vw; } .front .knob_row { width: 93%; height: 4vw; display: flex; justify-content: space-between; align-items: center; } .front .knob_row .three_knob_holder { display: flex; justify-content: space-between; align-items: center; } .front .knob_row .timer { width: 6vw; height: 68%; border: 0.1vw solid #8e8d8d; background: #a5a5a5b8; border-radius: 0.3vw; text-align: center; font-size: 1vw; font-family: "Orbitron", sans-serif; display: flex; justify-content: center; align-items: flex-end; position: relative; padding: 0.3vw; letter-spacing: 0.1vw; } .front .knob_row .timer::before { content: ""; position: absolute; width: 0.5vw; height: 0.5vw; top: 0.3vw; right: 44%; background: red; border-radius: 50%; animation: timer 1s linear 1s 11 normal forwards; } .front .knob_row .circle_knob { display: inline-block; width: 3vw; height: 3vw; background: #e8e8e8; border-radius: 100%; border: 0.2vw solid #656565; position: relative; display: flex; justify-content: center; align-items: center; margin-right: 1vw; } .front .knob_row .circle_knob .center { display: inline-block; width: 2vw; height: 2vw; border: 0.1vw solid #656565; border-radius: 100%; box-shadow: inset 0px 0px 2px 1px gainsboro; } .front .door { width: 100%; background: #80dad3; height: 25vw; border-radius: 2vw; padding: 2vw; } .front .door .glass { width: 100%; background: #ffffff94; height: 18vw; border-radius: 2vw; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border: 0.2vw solid #656565; overflow: hidden; } .front .door .glass::after { content: ""; position: absolute; width: 1vw; height: 100%; background: #ffffff4d; right: 9%; transform: skewX(323deg); z-index: 5; } .front .door .glass::before { content: ""; position: absolute; width: 3vw; height: 100%; background: #ffffff4d; right: 18%; transform: skewX(323deg); z-index: 5; } .front .door .knob { margin: 0 auto 2vw auto; width: 90%; height: 1vw; position: relative; display: flex; justify-content: space-between; align-items: center; } .front .door .knob .center { width: 94%; height: 1vw; background: #e8e8e8; border-radius: 1vw; position: absolute; right: 3%; z-index: 4; border: 0.2vw solid #656565; } .front .door .knob .right { width: 9%; height: 1.5vw; background: #656565; z-index: 2; border-radius: 1vw; border-top-right-radius: 3vw; border-bottom-right-radius: 3vw; } .front .door .knob .left { width: 9%; height: 1.5vw; background: #656565; z-index: 2; border-radius: 2vw; border-top-left-radius: 3vw; border-bottom-left-radius: 3vw; } .front .door .tray_holder { width: 100%; height: 0vw; perspective: 400px; display: flex; justify-content: center; align-items: center; } .front .door .tray { width: 84%; height: 15vw; background: #52525233; transform: rotateX(72deg); } .cake { width: 48%; display: flex; align-items: center; flex-direction: column; justify-content: center; margin-bottom: -1vw; z-index: 4; } .cake .dish { width: 100%; height: 2.5vw; background: #8e8e8e; border-radius: 0.4vw; box-shadow: -2px 2px 2px #969696; border-bottom-right-radius: 4vw; border-bottom-left-radius: 4v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0