css布局实现玩具车动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现玩具车动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> html, body { height: 100%; } body { background: linear-gradient(to right, #56ccf2, #2f80ed); } .toy-train { position: relative; left: 50%; top: 50%; margin-left: -100px; width: 109px; transform: scale(1.2); } .engine { float: right; position: relative; } .window { height: 28px; width: 30px; background-color: #194488; position: relative; border: 3px solid #000; } .window:before, .window:after { content: ""; position: absolute; left: 50%; border: 3px solid #000; } .window:before { height: 7px; background-color: #F82510; width: 45px; margin-top: -13px; margin-left: -26px; border-radius: 8px; } .window:after { margin-left: -8px; margin-top: 3px; border-radius: 50%; height: 11px; width: 11px; background-color: #fff; } .engine-main { height: 10px; width: 35px; border: 3px solid #000; background-color: #3D9A01; position: absolute; border-radius: 0 8px 8px 0; right: -41px; bottom: -3px; } .engine-main:before { content: ""; height: 10px; width: 8px; background-color: #000; position: absolute; top: -11px; left: 4px; transform: rotate(180deg); border-radius: 50% 50% 50% 50%/90% 90% 40% 40%; } .engine-main:after { content: ""; height: 12px; width: 8px; position: absolute; display: block; right: 5px; top: -18px; border-radius: 50% 50% 50% 50%/90% 90% 40% 40%; transform: rotate(180deg); z-index: -1; background-color: #194488; border: 3px solid #000; } .engine-body { height: 17px; width: 75px; position: absolute; left: -2px; top: 30px; background-color: #F69F00; border: 3px solid #000; border-radius: 5px; } .engine-body .big-wheel { top: 3px; left: 2px; } .engine-body .normal-wheel { left: 45px; top: 5px; } .engine-body:before { content: ""; position: absolute; height: 5px; width: 5px; left: -11px; bottom: 2px; z-index: -1; background-color: #fff; border-radius: 50%; border: 3px solid #000; } .wheels > div { position: absolute; background-color: #F82510; border-radius: 50%; border: 3px solid #000; animation: wheel-rotate 1s linear infinite; } .wheels > div:before { content: ""; position: absolute; width: 100%; border-bottom: 1px solid #000; top: 50%; margin-top: -1px; } .wheels > div:after { content: ""; height: 8px; width: 8px; position: absolute; background-color: #000; border-radius: 50%; left: 50%; top: 50%; margin-left: -4px; margin-top: -4px; } .wheels .big-wheel { width: 22px; height: 22px; animation-delay: -0.3s; } .wheels .normal-wheel { height: 20px; width: 20px; animation-delay: -0.6s; } .locomotive { height: 35px; width: 60px; border: 3px solid #000; background-color: #F69F00; border-radius: 5px; position: relative; float: left; margin-top: 13px; } .locomotive:before { content: ""; width: 100%; background: linear-gradient(to right, #000000 0%, #000000 8%, #f69f00 8%, #f69f00 15%, #000000 15%, #000000 28%, #000000 34%, #f69f00 34%, #f69f00 65%, #000000 65%, #000000 65%, #000000 100%); height: 3px; position: absolute; top: 6px; left: 0; } .locomotive:after { content: ""; width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0