与直接变色不同,颜色是有一个从中间向两边过渡的动画效果
按照评论区的方法会出现下面bug
也就是先点击,然后马上滑动的时候,动画进行到一半就消失了,看起来效果很糟糕
但最上的示例图就不会出现这类问题……
###伪类
+transform
简单实现了一下,细节自己处理一下
<style>
.demo, .demo li {
list-style: none;
margin: 0;
padding: 0;
}
.demo li {
width: 500px;
height: 100px;
background: #eee;
border-top:#ddd solid 1px;
position:relative;
}
.demo li:before{
content: '';
position:absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
bottom: 0;
width: 80%;
background: #ddd;
border-radius: 50px;
transition: 0.1s ease-out;
opacity: 0;
}
.demo li:active:before {
width: 100%;
border-radius: 0;
opacity: 1;
}
</style>
<ul class="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
###animation + keyframes
简易样例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>背景渐变动画</title>
<style type="text/css">
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%);
}
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>