添加/移除类时将背景颜色向下移动，只使用CSS吗？
添加/移除类时将背景颜色向下移动，只使用CSS吗？
提问于 2018-02-10 08:02:59
你好，我需要动画的背景变化的一个div，与新的背景从上面滑落。
我需要通过添加和删除类来触发动画：
.token {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
margin-bottom: 20px;
transition: background 1000ms linear;
}
.red {
background: red;
}
.blue {
background: blue;
}正如你所看到的，我已经放了一个小的动画，但我不确定我所需要的下滑效果是否可以单独使用CSS。
我想要的是能够创建多个类，每个类通过滑动向下更改应用于div的背景。
我需要通过添加一个类来触发动画，类应该包含要转换到的颜色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-10 12:24:30
您可以使用线性梯度的颜色，您将能够创建您的效果通过调整background-size。
以下是一个想法：
let previousClass="";
function color(className) {
$('#token').removeClass(previousClass);
previousClass=className;
setTimeout(function() {
$('#token').addClass(previousClass);
}, 500);
}.token {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
margin-bottom: 20px;
background-size: 100% 0;
background-position: 0 0;
background-repeat: no-repeat;
background-image: linear-gradient(white, white);
transition: 0.5s background-size linear;
}
.red {
background-image: linear-gradient(red, red);
background-size: 100% 100%;
}
.blue {
background-image: linear-gradient(blue, blue);
background-size: 100% 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="token" id="token"></div>
<button onclick="color('red')">Red</button>
<button onclick="color('blue')">Blue</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48722704
复制
相似问题
使用模式和匹配的Java正则表达式
java中使用正则表达式的模式匹配
Java正则表达式模式匹配
Java正则表达式模式匹配
正则表达式模式匹配java
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
