如何解决动画 css 渐变
我曾尝试使用 @keyframes
动画 css 渐变,但它不起作用,它只是立即从一个切换到另一个。是否可以动画渐变?我只有两个背景渐变,我想以任何方式设置动画,但过渡不那么突然。
解决方法
不完全是...
.css-selector {
background: linear-gradient(317deg,#ff0000,#0b00ff,#ff00f0);
background-size: 600% 600%;
-webkit-animation: AniBackground 5s ease infinite;
animation: AniBackground 5s ease infinite;
}
@-webkit-keyframes AniBackground {
0%{background-position:7% 0%}
50%{background-position:94% 100%}
100%{background-position:7% 0%}
}
@keyframes AniBackground {
0%{background-position:7% 0%}
50%{background-position:94% 100%}
100%{background-position:7% 0%}
}
试试看,看看效果如何。这有点作弊,因为它确实为背景设置了动画,但这是一个很好的作弊。
,如果你的意思是在背景中,那么有一种方法。
方法是让背景比容器大并让它移动,就像这样:
get_timeline(as_userid(aux_users),n=10,start_time="2021-05-21")
.animate-background{
height:100px;
width:300px;
background: linear-gradient(-45deg,#F00,#0F0,#00F );
background-size: 500% 100%;
-webkit-animation: gradientBG 5s ease-in-out infinite;
animation: gradientBG 5s ease-in-out infinite;
}
@-webkit-keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。