進階版案例完結
阿新 • • 發佈：2022-03-27
1. html 結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/menu.css"> </head> <body> <div class="menu-wrap"> <input type="checkbox" class="toggler"> <div class="hamburger"><div></div></div> <div class="menu"> <div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Serices</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> <header id="showcase"> <div class="container showcase-container"> <h1>歡迎來到鑠洋線上</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eveniet modi nihil non, ea suscipit neque dolorem officia similique amet quidem dolores optio veritatis excepturi veniam, unde expedita asperiores tempora.</p> <a href="#" class="btn">閱讀更多</a> </div> </header> </body> </html>
2. css 樣式
:root { --primary--color: rgba(13, 110, 139, 0.75); --secondary-color: rgba(229, 148, 0, 0.9); --overlay-color: rgba(24, 39, 51, 0.85); --menu-speed: 1s; } /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } .container { max-width: 960; margin: 0 auto; overflow: hidden; padding: 0 3rem; } #showcase { background-color: var(--primary--color); color: #fff; height: 100vh; position: relative; } #showcase:before { content: ''; background: url('../img/1.jpg') no-repeat center center/cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #showcase .showcase-container { display: flex; /* 豎向排序 */ flex-direction: column; /* 上下居中 */ justify-content: center; /* 上下居中 */ align-items: center; text-align: center; height: 100%; } #showcase .showcase-container h1 { font-size: 4rem; } #showcase .showcase-container p { font-size: 1.3rem; } .btn { display: inline-block; border: none; text-decoration: none; color: #fff; padding: 0.75rem 1.5rem; margin-top: 1rem; transition: opacity 1s ease-in-out; } .btn:hover{ opacity: 0.7; }
這裡有兩個資料夾上面是第一個
:root { --primary--color: rgba(13, 110, 139, 0.75); --secondary-color: rgba(229, 148, 0, 0.9); --overlay-color: rgba(24, 39, 51, 0.85); --menu-speed: 1s; } .menu-wrap { position: fixed; top: 0; left: 0; z-index: 1; } .menu-wrap .toggler { position: absolute; top: 0; left: 0; z-index: 2; /* 控制游標的型別 */ cursor: pointer; width: 60px; height: 60px; opacity: 0; } .menu-wrap .hamburger { position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 60px; padding: 1rem; background: var(--primary--color); display: flex; justify-content: center; align-content: center; } /* hamburger line */ .menu-wrap .hamburger > div { position: relative; top: 15px; flex: none; width: 100%; height: 2px; background: #fff; transition: all 0.4s ease; } /* hamburger liner -- top & bottom */ .menu-wrap .hamburger > div:before, .menu-wrap .hamburger > div:after{ content: ''; position: absolute; z-index: 1; background: #fff; width: 100%; height: 2px; top: -10px; } .menu-wrap .hamburger > div:after { top: 10px; } /* toggler animation */ .menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); } /* turn linex into */ .menu-wrap .toggler:checked + .hamburger > div:before, .menu-wrap .toggler:checked + .hamburger > div:after{ top: 0px; transform: rotate(90deg); } .menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); } /* show menu */ .menu-wrap .toggler:checked ~ .menu{ /* 可見 */ visibility: visible; } .menu-wrap .toggler:checked ~ .menu > div { transform: scale(1); transition:var(--menu-speed); } .menu-wrap .toggler:checked ~ .menu > div > div { opacity: 1; transition: opacity 0.4s ease 0.4s; } /* menu */ .menu-wrap .menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; visibility: hidden; } .menu-wrap .menu > div { background: var(--overlay-color); width: 200vw; height: 200vw; display: flex; flex: none; justify-content: center; align-items: center; border-radius: 50%; transform: scale(0); transition: all 0.4s ease; } .menu-wrap .menu > div > div { text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; } .menu-wrap .menu > div > div > ul > li { list-style: none; color: #fff; font-size: 1.5rem; padding: 1rem; } .menu-wrap .menu > div > div > ul > li > a{ color: #fff; text-decoration: none; transition: color 0.4s ease; } .menu-wrap .menu > div > div > ul > li >a:hover { color: var(--secondary-color); }