css3 - progress漸變效果css
問題描述
請問下圖中的這種漸變效果怎么寫的?從橙色轉(zhuǎn)為紅色。#FFE669-#FA1A0A
問題解答
回答1:不知道這樣是否滿足你的要求
<p id='progress'></p>
/*CSS3進(jìn)度條動畫*/@keyframes progress{from {background-position: 0 0,0 0}to {background-position: 40px 0,0 0}}#progress{position:absolute;top:100px;left:100px;width:300px;height:20px;border-radius:10px; /*position/size/image的屬性值都是 第一組圖像,第二組圖像 第一組會覆蓋第二組,所以半透明的圖片可以放在第一組*/ background-position:0 0,0 0; background-size:40px 40px,100% 100%; background-image:linear-gradient(45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%,transparent), linear-gradient(90deg,#FFE669, #FA1A0A); animation:progress 2s linear infinite;/*動畫*/}
相關(guān)文章:
1. mysql - 如何減少使用或者不用LEFT JOIN查詢?2. 視頻文件不能播放,怎么辦?3. mysql - jdbc的問題4. python - 編碼問題求助5. linux - python 抓取公眾號文章遇到驗證問題6. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里?7. 網(wǎng)頁爬蟲 - python 爬取網(wǎng)站 并解析非json內(nèi)容8. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. node.js - nodejs開發(fā)中常用的連接mysql的庫10. python - 我在使用pip install -r requirements.txt下載時,為什么部分能下載,部分不能下載
