div+css实现缝纫机裁缝机工作动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现缝纫机裁缝机工作动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { margin: 0; content: ""; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #e3f1ff; transform: scale(1.15); } .sewing-stuff { width: 450px; align-items: flex-end; justify-content: space-around; transform: translateY(-3px); display: flex; } .table { height: 15px; width: 450px; background-color: #f1dbc1; border-bottom: 5px solid #5796e9; } .tape-top { height: 11px; width: 34px; border-radius: 2px 0 0 1px; background-color: #fff896; box-shadow: 0 2.75px #fdde51; } .tape-top::before, .tape-top::after { position: absolute; } .tape-top::before { height: 5.5px; width: 34px; background-image: repeating-linear-gradient(to right, transparent, transparent 11%, #5796e9 11%, #5796e9 16%); } .tape-top::after { height: 0; width: 0; border-style: solid; border-width: 14.3px 0 0 14.3px; border-color: transparent transparent transparent #fdde51; margin-left: 34px; } .tape-bottom { height: 49.3px; width: 11px; position: absolute; background-color: #fff896; margin-left: 34px; margin-top: 3.3px; box-shadow: 2.75px 0 #fdde51; } .tape-bottom::before, .tape-bottom::after { content: ""; position: absolute; } .tape-bottom::before { height: 47.6px; width: 55%; background-image: repeating-linear-gradient(to bottom, transparent, transparent 10%, #5796e9 10%, #5796e9 13%); } .tape-bottom::after { height: 11px; width: 11px; margin-top: 49.3px; border-radius: 0 0 1px 1px; box-shadow: 2.75px 0 #a5a4a4; background-color: #666666; border: 2.2px solid #c2c2c2; } .pin-cushion { height: 6px; width: 50px; position: relative; border-radius: 1px 1px 1px 1px; background-color: #fffefb; box-shadow: 0 3px #5796e9; } .pin-cushion::before { content: ""; position: absolute; z-index: 1; height: 22.5px; box-shadow: 0 4px #eea0cd; width: 45px; background-color: #ffd1f8; border-radius: 10em 10em 0 0; transform: translateY(-27px) translateX(2.4px); } .pins { display: flex; z-index: 5; position: absolute; justify-content: space-around; transform: translateY(-30px); } .pin { z-index: 5; margin-right: 8.5px; height: 20px; width: 1px; background-image: linear-gradient(to bottom, gray, #cfcfcf); } .pin::before { position: absolute; display: flex; height: 4px; width: 4px; border-radius: 50%; background-color: #5796e9; transform: translateX(-1.4px) translateY(-4px); } .pin:nth-child(1) { transform: rotate(-35deg) translateY(5px); } .pin:nth-child(2) { transform: rotate(-20deg); } .pin:nth-child(3) { transform: rotate(-9deg) translateY(-3px); } .pin:nth-child(4) { transform: rotate(3deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0