作者 | 楊小二
前言
暢銷書《異類》的作者格拉德威爾告訴我們，人們眼中的天才之是以卓越非凡，并非天資超人一等，而是付出了持續不斷的努力，隻要經過1萬小時的錘煉，任何人都能從平凡變成超凡。
是以，我們在提升自己技能，不斷精進的路上，刻意練習起到了非常大的作用。而面對程式設計，如何習得這樣的專業技能，請多動手多練習。
如果你覺得每天練習一個小時，半個小時，時間太長，那麼，我們就先從每天5分鐘開始做起。
是以，我們大家一起，從每天5分鐘練習開始，每天實作一個效果。一個月就可以練習30個效果，一年就是365個效果，如果能夠堅持練習兩年，前端技術領域的很多常用效果，你都會了。
從今天開始，敲下你的第一行代碼。
從今天開始，每天堅持學習5分鐘，實作一個簡單的效果。
案例效果
這是最終實作的效果，因為，我是用軟體錄制的GIF動畫，是以效果不是那麼流暢。
要點解析
- 在清單項錨點處使用 :before 僞元素建立懸停效果，使用 transform: scale(0) 隐藏它。
- 使用 :hover 和 :focus 僞類選擇器轉換到 transform: scale(1) 并顯示帶有彩色背景的僞元素。
- 使用a:hover僞類對文字顔色進行設定。
- 使用 z-index 防止僞元素覆寫錨元素。
案例代碼
HTML代碼：
<nav class="hover-nav">
<ul>
<li><a href="http://www.webqdkf.com/">首頁</a></li>
<li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li>
<li><a href="http://www.webqdkf.com/JS/">JavaScript</a></li>
</ul>
</nav> CSS代碼：
.hover-nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.hover-nav li {
float: left;
}
.hover-nav li a {
position: relative;
display: block;
color: #222;
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
.hover-nav li a:hover {
color: #fff;
}
li a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: #1ab1cc;
z-index: -1;
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {
transform: scale(1);
} 完整代碼如下：
<html>
<head>
<style type="text/css">
.hover-nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.hover-nav ul li {
float: left;
}
.hover-nav li a {
position: relative;
display: block;
color: #222;
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
.hover-nav li a:hover {
color: #fff;
}
li a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: #1ab1cc;
z-index: -1;
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {
transform: scale(1);
}
</style>
</head>
<body>
<nav class="hover-nav">
<ul>
<li><a href="http://www.webqdkf.com/">首頁</a></li>
<li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li>
<li><a href="http://www.webqdkf.com/JS/">JavaScript</a></li>
</ul>
</nav>
</body>
</html> 寫在最後
關于這個5分鐘代碼練習的靈感，主要是來源于我在極客時間上購買的一個課程《如何成為學習高手》，作者高冷冷分享了很多她學習時候的一些方法，其中，裡面有一個5分鐘克服拖延症的方法。快速開始，堅持5分鐘，5分鐘後，你可以再進行其他事項。
是以，從今天開始，也希望你能堅持每天學習5分鐘，然後慢慢把學習時間加長，讓自己成為一個學習高手。加油吧，少年。
最後，今天這個效果，你都學會了嗎？如果還不會，請自行多練習幾遍。
在此，感謝你的閱讀。我是楊小二，我們下次再見。