animation + keyframes

簡易樣例如下：

背景漸變動畫

div {

width:300px;

height:48px;

background:#eee;

text-align:center;

}

div:active{

/*執行動畫*/

animation:show 0.5s 1;

/*停止在最后一幀*/

animation-fill-mode:forwards;

}

@keyframes show{

10%{

background:radial-gradient(Circle,#999 40%, #999 40%, #eee 40%);

}

20%{

background:radial-gradient(Circle,#999 60%, #999 60%, #eee 60%);

}

40%{

background:radial-gradient(Circle,#999 80%, #999 80%, #eee 80%);

}

60%{

background:radial-gradient(Circle,#999 90%, #999 90%,, #eee 90%);

}

80%{

background:radial-gradient(Circle,#999 95%, #999 95%, #eee 95%);

}

100%{

background:radial-gradient(Circle,#999 100%, #999 100%, #eee 100%);

}

}

內容

總結

以上是生活随笔為你收集整理的css手机端长摁背景变色,css动画，如何实现点击/长按时背景色切换的动画效果（背景从中间向两边延展）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。