纯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 { dis.........完整代码请登录后点击上方下载按钮下载查看
网友评论0