css3 - progress漸變效果css
問題描述
請問下圖中的這種漸變效果怎么寫的?從橙色轉(zhuǎn)為紅色。#FFE669-#FA1A0A
問題解答
回答1:不知道這樣是否滿足你的要求
<p id='progress'></p>
/*CSS3進(jìn)度條動(dòng)畫*/@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的屬性值都是 第一組圖像,第二組圖像 第一組會(huì)覆蓋第二組,所以半透明的圖片可以放在第一組*/ 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;/*動(dòng)畫*/}
相關(guān)文章:
1. docker綁定了nginx端口 外部訪問不到2. dockerfile - 為什么docker容器啟動(dòng)不了?3. git - webstorm窗口中左側(cè)列表的文件名顏色怎么修改4. javascript - 深夜被問題困擾求解惑,rn的API之PermissionsAndroidd的問題5. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問題!!6. android權(quán)限被第三方安全軟件禁止,如何獲取該權(quán)限狀態(tài)7. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?8. mysql - 我的myeclipse一直連顯示數(shù)據(jù)庫連接失敗,不知道為什么9. tp 6.0 數(shù)據(jù)查詢,求教!10. mysqld無法關(guān)閉

網(wǎng)公網(wǎng)安備