其他
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱
写在前面
今天我们迎来了【每日一练】栏目的第100个练习，在这几个月的持续练习中，我不知道，你学到了什么？是持续学习的习惯，还是前端基础知识？
但是，不管怎么样，只要持续的去做去学习自己认为有用的知识技能，它迟早会成为一种力量，特别是哪些需要用时间积累起来的东西，更值得我们用心花时间去做。
当我们一无所有的时候，我们就应该通过自己每天的行动去为自己储备力量，因为这个是我们可以把握的事情，这个也是我当初做公众号一直坚持到今天的动力。
希望你也能持续学习，持续行动，把每一个想法落地执行。
原本在开始【每日一练】栏目的时候，计划是先写满100个小练习就打算截至。
但是，当我在写第97个练习的时候，我突然又重新调整了计划，定了一个新目标，写满1000个练习项目，希望大家继续打卡每日一练，让自己变成一个知行合一的行动派，不管是培养自己学习的习惯，还是学习前端知识，我都希望大家能够保持持续学习力量。
好了，今天说了很多，我们现在还是回到今天的练习中来，我们先一起来看一下今天练习的最终效果：
<!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><a href="https://www.webqdkf.com/" target="_blank">【每日一练】100—CSS实现3D菜单效果</a></li></ul></body></html>
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(to bottom,#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); }document.write("<script src='https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js'><\/script>");写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号