css3 - progress漸變效果css
問題描述
請問下圖中的這種漸變效果怎么寫的?從橙色轉為紅色。#FFE669-#FA1A0A
問題解答
回答1:不知道這樣是否滿足你的要求
<p id='progress'></p>
/*CSS3進度條動畫*/@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;/*動畫*/}
相關文章:
1. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦5. 注冊賬戶文字不能左右分離6. JavaScript事件7. javascript - 數組的過濾和渲染8. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能9. html - vue項目中用到了elementUI問題10. javascript - ES6標準入門中let命令提到的for循環打印i是10,如果不用let怎么替換?
