当前位置：文江博客话题详情

CSS 动画前端

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

发布于 2022-09-12 22:38:14 字数 302 浏览 24 评论 0

与直接变色不同，颜色是有一个从中间向两边过渡的动画效果

按照评论区的方法会出现下面bug

也就是先点击，然后马上滑动的时候，动画进行到一半就消失了，看起来效果很糟糕

但最上的示例图就不会出现这类问题……

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

错爱 2022-09-19 22:38:14

伪类+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>

私藏温柔 2022-09-19 22:38:14

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>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文