css手机端长摁背景变色,css动画，如何实现点击/长按时背景色切换的动画效果（背景从中间向两边延展）...

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%);

}

}

内容