CSS3是網站設計中不可或缺的一種關鍵技術。它使得頁面設計者可以以更加靈活和編排的方式呈現內容,從而讓網站更容易實現動態效果和現代化的外觀。以下是我個人欣賞的一些使用CSS3的個人網站:
/* 第一個網站 */ .banner { background-image: url("img/banner.png"); background-size: cover; height: 60vh; position: relative; } .banner:before { content: ""; background-color: rgba(0,0,0,0.5); height: inherit; position: absolute; width: inherit; } .banner h1 { color: white; font-size: 5em; font-weight: 300; letter-spacing: 0.2em; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } /* 第二個網站 */ #nav { margin-top: 10px; text-align: center; } #nav a { color: #484848; display: inline-block; font-size: 1.3em; font-weight: bold; margin-right: 30px; padding-bottom: 5px; position: relative; text-decoration: none; text-transform: uppercase; } #nav a:before { background-color: #3fa9f5; bottom: 0; content: ""; height: 2px; left: 50%; position: absolute; transition: left 0.15s ease-out, right 0.15s ease-out; width: 0; } #nav a:hover:before { left: 10%; right: 10%; width: 80%; }
以上兩個網站分別展示了CSS3強大的背景圖像處理和文字效果處理,以及交互式的導航菜單。CSS3還可以實現更多的效果,例如響應式布局、半透明處理和動畫處理等。對于想要建立一個現代化網站的設計者和開發者來說,學習和掌握CSS3的技術是非常重要和必要的。