close

文 | 楊小愛

寫在前面

今天我們迎來了【每日一練】欄目的第100個練習，在這幾個月的持續練習中，我不知道，你學到了什麼？是持續學習的習慣，還是前端基礎知識？

但是，不管怎麼樣，只要持續的去做去學習自己認為有用的知識技能，它遲早會成為一種力量，特別是哪些需要用時間積累起來的東西，更值得我們用心花時間去做。

當我們一無所有的時候，我們就應該通過自己每天的行動去為自己儲備力量，因為這個是我們可以把握的事情，這個也是我當初做公眾號一直堅持到今天的動力。

希望你也能持續學習，持續行動，把每一個想法落地執行。

原本在開始【每日一練】欄目的時候，計劃是先寫滿100個小練習就打算截至。

但是，當我在寫第97個練習的時候，我突然又重新調整了計劃，定了一個新目標，寫滿1000個練習項目，希望大家繼續打卡每日一練，讓自己變成一個知行合一的行動派，不管是培養自己學習的習慣，還是學習前端知識，我都希望大家能夠保持持續學習力量。

好了，今天說了很多，我們現在還是回到今天的練習中來，我們先一起來看一下今天練習的最終效果：

看完了最終練習的效果，我們再來看一下今天練習的實現代碼。
HTML代碼：
<!doctype html><html><head><meta charset="utf-8"><title>【每日一練】100—一個漸變色計數器列表的實現</title></head><body><ul> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】01—CSS實現3D菜單效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】02—CSS實現發光按鈕Hover 效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】03—實現動畫循環進度</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】04—CSS 創意菜單欄的文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】05—CSS 實現創意按鈕動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】06—實用又有創意的產品卡片動畫</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】07—CSS實現響應式產品介紹的Hover效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】08—404頁面的動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】09—透明列表Hove效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】10—移動3D觸摸滑塊的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】11—複選框效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】12—CSS 產品卡片動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】13—CSS 產品卡片動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】14—CSS 實現常見問答手風琴效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】15—CSS實現好看的卡片效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】16—響應式電子日曆效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】17—發光導航欄效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】18—搜索框效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】19—CSS 實現撕紙的效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】20—CSS實現文字動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】21—CSS實現炫酷動畫背景</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】22—實現一個菜單選項卡的效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】23—CSS實現圖像懸停動畫的效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】24—CSS實現產品卡片的動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】25—CSS實現按鈕懸停發光動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】26—CSS實現響應式卡片懸停效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】27—CSS實現留言板效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】28—用Swiper實現的3D滑動效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】29—CSS實現美食卡 UI 設計效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】30—用 HTML + CSS 實現仿WhatsApp 的聊天界面效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】31—CSS 實現一個彩色旋轉方塊loading動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】32—一款實用動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】33—CSS 3D 搜索框的 UI 實現效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】34—CSS 實現邊框動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】35—一個簡單的彈出框效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】36—CSS實現一款炫酷的3D 文本旋轉效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】37—自動打字效果的實現 </a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】38—黑暗模式效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】39—七夕節背景輪播圖效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】40—模糊加載動畫的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】41—網站頁面內容占位加載動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】42—垂直輪播圖效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】43—鼠標拖拽效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】44—繪圖應用程序效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】45—記錄喝水量動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】46—登錄頁面表單輸入動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】47—創意導航菜單欄動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】48—圍繞地球旋轉的文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】49—天氣產品里會用到的下雨動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】50—純CSS實現咖啡杯挪動開關動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】51—CSS實現可摺疊卡片懸停動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】52—寫一個簡單的靜態商品服務網站頁面</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】53—寫一個完整的攝影網站頁面</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】54—CSS實現蒙娜麗莎的馬賽克藝術畫</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】55—CSS實現3D文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】56—CSS實現一款實用的響應式卡片懸停效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】57— 寫一個文本煙霧消失動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】58— 寫一個登錄和註冊頁</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】59—寫一個中秋月餅的響應式卡片</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】60—用HTML&CSS寫一個美食網站</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】61—用HTML&CSS寫一個個人單頁博客站</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】62—用HTML&CSS寫一個信息展示的卡片效果 </a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】63—CSS實現金屬邊框文本效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】64—CSS實現彩虹文字的動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】65—CSS實現文本裁切gif動畫效果 </a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】66—實現一個3D邊框背景效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】67—通過獲取電影資源API來實現一個電影網站頁面</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】68—CSS實現一組漸變按鈕動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】69—CSS實現一個牛奶加載動畫</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】70—CSS實現[禁止吸煙]3D文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】71—CSS實現登錄表單邊框動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】72—用Javascript 寫一個計算器小項目</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】73—一款好玩的數字時鐘效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】74—CSS 實現的一款炫酷文字動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】75—自定義選擇菜單的實現練習</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】76—一款非常有創意的刪除按鈕動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】77—CSS 實現一款文字Hover效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】78—CSS實現發光的漸變圓形文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】79—CSS實現掃描二維碼動畫</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】80—CSS滑動操作菜單</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】81—CSS實現輸入文本動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】82—CSS實現導航菜單動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】83—用HTML&CSS 實現一個個人網頁版簡歷的設計</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】84—純CSS3實現一隻小貓笑臉動畫</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】85- CSS分層彩色文本效果生成器的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】86—一個動畫菜單效果的實現果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】87—Bootstrap實現一款簡潔時尚的價格表效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】88—1024程序員節文本動畫效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】89—一個滑動卡片動畫UI效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】90—CSS實現圖片懸停疊加動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】91—CSS實現活躍讀者列表的鼠標懸停動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】92—實現一個耳機音箱專賣店網站的靜態頁面</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】93—實現一個搜索框的動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】94—CSS實現一個炫酷好玩的3D動畫效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】95—CSS 3D加載動畫進度效果的實現</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】96—Bootstrap實現一個響應式卡片效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】97—美麗畫卷摺疊效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】98—CSS實現3D菜單效果</a></li> <li><a href="https://www.webqdkf.com/" target="_blank">【每日一練】99—CSS實現3D菜單效果</a></li><li><ahref="https://www.webqdkf.com/"target="_blank">【每日一練】100—CSS實現3D菜單效果</a></li></ul></body></html>
CSS代碼：
body { font-family:"Microsoft YaHei" ; display: flex; justify-content: center; color: gray; background-color: #222; } ul { counter-reset: index; padding: 0;max-width:1200px; } li { line-height: 1.5; counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; color:#eee; } li a{ color:#00a6bc; text-decoration:none } li a:hover{ color:#fff; } li::before { content: counters(index, ".", decimal-leading-zero); font-size: 1.5rem; text-align: right; font-weight: bold; min-width: 50px; padding-right: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; align-self: flex-start;background-image:linear-gradient(tobottom,#fff,#00a6bc); background-attachment: fixed; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } li + li { border-top: 1px solid rgba(255,255,255,0.2); }
JS：
document.write("<script src='https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js'><\/script>");

寫在最後

以上就是每日一練的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。

我是楊小愛，我們明天見。

學習更多技能

請點擊下方公眾號


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 鑽石舞台 的頭像
    鑽石舞台

    鑽石舞台

    鑽石舞台 發表在 痞客邦 留言(0) 人氣()