纯css布局实现伦敦bus效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现伦敦bus效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'> <style> html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #9cd8f4; background-position: 270px -140px; background-size: 720px; background-repeat: none; font-family: 'Open Sans', sans-serif; } .bus { width: 560px; height: 325px; position: relative; } .bus .body { width: 100%; height: 100%; } .bus .body .top { background-color: #f81e15; border-radius: 50px 50px 0 0; height: 140px; width: 100%; top: 0; position: absolute; } .bus .body .top .windows { display: flex; justify-content: space-between; position: absolute; width: 520px; top: 15px; left: 20px; } .bus .body .top .windows .window { box-shadow: 0 0 0 3px rgba(38, 39, 45, 0.3), inset -5px 5px 0 rgba(38, 39, 45, 0.1); background-image: linear-gradient(35deg, #9cd8f4 0%, #9cd8f4 30%, #b3e1f7 30%, #b3e1f7 40%, #9cd8f4 40%, #9cd8f4 45%, #b3e1f7 45%, #b3e1f7 70%, #9cd8f4 70%); width: 72px; height: 40px; border-radius: 8px; } .bus .body .top .windows .window:first-child { border-top-left-radius: 30px; width: 92px; } .bus .body .top .windows .window:last-child { border-top-right-radius: 30px; } .bus .body .sign { display: flex; position: absolute; top: 73px; left: 20px; background-color: #9c9c9c; width: 435px; height: 50px; border-radius: 5px; box-shadow: 0 0 0 3px rgba(38, 39, 45, 0.3); overflow: hidden; } .bus .body .sign .flag { position: relative; height: 100%; width: 105px; background-color: #212a8c; overflow: hidden; box-shadow: 3px 0 0 rgba(38, 39, 45, 0.3); } .bus .body .sign .flag .line { background-color: #f81e15; position: absolute; left: -20%; width: 140%; height: 8px; border: 5px solid white; } .bus .body .sign .flag .line:nth-child(1) { top: -20px; transform-origin: 0 0; transform: rotate(26deg); } .bus .body .sign .flag .line:nth-child(2) { bottom: -20px; transform-origin: 0 0; transform: rotate(-26deg); } .bus .body .sign .flag .line:nth-child(3) { top: 16px; height: 11px; border-width: 4px; transform-origin: 0 0; } .bus .body .sign .flag .line:nth-child(4) { left: -25px; height: 11px; border-width: 4px; transform: rotate(90deg); } .bus .body .sign .flag .line:nth-child(5) { top: 20px; height: 11px; border: none; } .bus .body .sign .text { display: flex; align-items: center; justify-content: center; flex: 1; font-size: 42px; letter-spacing: 2px; color: white; } .bus .body .number { position: absolute; top: 96px; right: 20px; color: white; background-color: #26272d; display: flex; align-items: center; justify-content: center; width: 72px; height: 25px; border-radius: 5px; font-size: 20px; letter-spacing: 2px; box-shadow: 0 0 0 3px rgba(38, 39, 45, 0.3); } .bus .body .yellow-line { width: 102%; height: 12px; position: absolute; top: 133px; left: -1%; background-image: linear-gradient(#f0c252 0%, #f0c252 20%, #f8e3b0 20%, #f8e3b0 45%, #f0c252 50%); border-radius: 5px; } .bus .body .bottom { position: absolute; top: 145px; width: 100%; } .bus .body .bottom .upper { position: absolute; background-color: #f81e15; width: 520px; right: 0; height: 60px; } .bus .body .bottom .lower { position: absolute; background-color: #f81e15; width: 100%; height: 75px; top: 60px; border-bottom: 5px solid #26272d; border-radius: 50px/20px 0 0 0; } .bus .body .bottom .headlight { position: absolute; width: 6px; height: 20px; background-color: #f0c252; top: 100px; left: -3px; border-radius: 3px; } .bus .body .bottom .mirror { position: absolute; width: 10px; height: 30px; background-color: #26272d; top: 5px; left: 7px; border-radius: 2px; } .bus .body .bottom .mirror::before { content: ''; position: absolute; border-left: 3px solid #26272d; border-bottom: 3px solid #26272d; border-radius: 0 0 0 4px; width: 5px; height: 15px; left: -5px; top: -6px; } .bus .body .bottom .staircase { position: absolute; background-color: #d40e06; width: 70px; height: 130px; top: 5px; right: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0