念念不忘
必有回响

B站网页特效学习 — 自适应UI设计

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

自适应UI设计演示:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自适应卡片UI设计</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Poppins', sans-serif; background: #070c24; } .container { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 900px; height: 600px; background: #fff; margin: 20px; } .container .imgBx { position: relative; display: flex; justify-content: center; align-content: center; width: 50%; height: 100%; background: #006dbc; } .container .imgBx::before { content: 'Nike'; position: absolute; top: 20px; left: 20px; color: #000; opacity: 0.1; font-size: 8em; font-weight: 800; } .container .imgBx img { position: relative; width: 700px; left: -50px; transform: rotate(-30deg); } .container .details { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; box-sizing: border-box; padding: 40px; } .container .details h2 { margin: 0; padding: 0; font-size: 2.5em; line-height: 0.8em; color: #444; } .container .details h2 span { font-size: 0.4em; text-transform: uppercase; letter-spacing: 2px; color: #999; } .container .details p { max-width: 85%; margin-left: 10%; color: #333; font-size: 15px; } .container .details h3 { margin: 0; padding: 0; font-size: 2.5em; color: #a2a2a2; float: left; } .container .details button { background: #006dbc; color: #fff; border: none; box-shadow: none; outline: none; padding: 15px 20px; margin-top: 5px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-radius: 40px; float: right; cursor: pointer; } @media (max-width: 1080px) { .container { height: auto; } .container .imgBx { padding: 40px; box-sizing: border-box; width: 100% !important; height: auto; text-align: center; overflow: hidden; } .container .imgBx img { left: initial; max-width: 100%; height: 90%; transform: rotate(0deg); } .details { width: 100% !important; height: auto; padding: 20px; } .container .details p { max-width: 100%; margin-left: 0; } } </style> </head> <body> <div class="container"> <div class="imgBx"> <img src="../images/下载.png" alt="" /> </div> <div class="details"> <div class="content"> <h2>Nike Air Max 270<br /><span>Runing Collection</span></h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo natus ipsum praesentium explicabo nesciunt consequatur ea error similique cum non doloribus quis libero quam rem, cumque aspernatur provident quibusdam deleniti?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, vero totam maiores error excepturi optio delectus sequi aspernatur tenetur tempora amet harum at ullam dolore quas consequuntur magni laboriosam laudantium?Lorem ipsum dolor sit itaque, nisi rerum accusantium quae officia nesciunt vero ex libero veniam quod corporis atque. </p> <h3>$150.99</h3> <button>Buy now</button> </div> </div> </div> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 自适应UI设计
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址