鍍金池/ 問答/HTML/ css3如何實現(xiàn)圓圈顏色驟變動畫？

css3如何實現(xiàn)圓圈顏色驟變動畫？

我的css代碼是這樣的：

.content .circles .c{
    position: absolute;
    left: 50%;
    top: 20%;
    border-radius: 50%;
    box-shadow: 0 0 30px #fff;
    width: 65px;
    height: 65px;
    background-color: red;
    animation: shine 0.5s infinite;
}
@keyframes shine{
    0%{
        background-color: red;
    }
    50%{
        background-color: green;
    }
    100%{
        background-color: blue;
    }
}

這樣實現(xiàn)的圓圈閃爍是有過渡動畫的，也就是顏色不會突變而是漸變。
我想實現(xiàn)三個顏色連續(xù)閃動的效果，就三個幀，請問怎么實現(xiàn)呢？

回答
編輯回答
獨白

animation 里面有個 steps()的屬性，關(guān)于用法，可以點擊推薦鏈接查看
在你的這個需求里面，要做到三個幀突變，steps()很完美的解決了你的需求，具體代碼：

animation: shine 3s steps(1)  infinite;

    @keyframes shine {
      0% {
        background-color: red;
      }
      33%{
        background-color: blue;
      }
      66%{
        background-color: green;
      }
      100% {
        background-color: red;
      }
    }

注意，100%的時候應該是連續(xù)循環(huán)動畫的初始狀態(tài)，不然動畫結(jié)束至動畫開始的過程會很生硬。

2018年5月24日 19:08
編輯回答
孤星
@keyframes shine{
    0%{
        background-color: red;
    }
    49%{ 
        background-color: red;
    }
    50%{
        background-color: green;
    }
    99%{ 
        background-color: green;
    }
    100%{
        background-color: blue;
    }
}

可以嘗試一下這種方式，不過百分比需要好好調(diào)整。

2018年1月8日 23:40