如何解决我正在努力在CSS中制作线性动画
我一直在尝试使用可用的不同电影和节目来重现Apple TV Plus页面上使用的效果,其中有一种“线性”动画,内容无限,悬停时它会变慢。
(https://www.apple.com/apple-tv-plus/)
但是,我使用了十年前在代码网站上发布的简单代码,但我认为这不是正确的选择,因为那样,我还无法实现真正的“无限”效果,例如一旦列表的最后一项到达页面的左边界,它将重新启动而不是执行其循环。另外,我尝试使悬停时的动画速度变慢,但是它只是跳到页面上而没有过渡或任何改变。我有点迷茫,而且是个新手,所以我将非常感谢您提供的任何帮助。
这是我的代码:
@keyframes defilement-rtl {
0% {
transform: translate3d(0,0); /* position initiale à droite */
}
100% {
transform: translate3d(-100%,0); /* position finale à gauche */
}
}
article.head-explore {
overflow: hidden;
max-width: 100%;
padding-top: 150px;
padding-bottom: 40px;
background-image: -moz-radial-gradient( 50% 50%,circle closest-side,rgb(54,56,63) 0%,rgb(26,29,34) 50%,rgb(0,0) 100%);
background-image: -webkit-radial-gradient( 50% 50%,0) 100%);
background-image: -ms-radial-gradient( 50% 50%,0) 100%);
background-color: black;
text-align: center;
}
article.head-explore h1 {
margin-bottom: 150px;
line-height: 90px;
font-weight: 600;
font-size: 80px;
text-align: center;
}
article.head-explore ul.bots-row-1,article.head-explore ul.bots-row-2 {
width: auto;
display: flex;
flex-direction: row;
height: 212px;
color: black;
transition: 0.2s all;
}
article.head-explore ul.bots-row-1 {
margin-bottom: 20px;
animation: defilement-rtl 20s infinite linear;
}
article.head-explore ul.bots-row-2 {
animation: defilement-rtl 30s infinite linear;
margin-bottom: 40px;
}
article.head-explore ul.bots-row-1 li,article.head-explore ul.bots-row-2 li {
margin-right: 20px;
width: 350px;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
background-color: red;
border-radius: 30px;
}
article.head-explore ul.bots-row-1:hover {
animation: defilement-rtl 30s infinite linear;
}
article.head-explore ul.bots-row-2:hover {
animation: defilement-rtl 40s infinite linear;
}
<article class="head-explore">
<h1>Discover all new<br>opportunities</h1>
<ul class="bots-row-1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="bots-row-2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="">See full bot list <img src="./arrow.svg"/></a>
</article>
解决方法
css动画无法完成您想做的事情。您无法进行最后一个模块之后的“无限”过渡,以“重新加载”内容队列。但是使用轮播/滑块库可能并不困难。
我一直使用slike slider,因为对我来说,它是最容易实现的工具之一,易于实现,但仍有很多选项可以轻松自定义。
检查我在此JSfiddle
中为您制作的示例但是...如果您想在悬停时操作动画speed
,则可能需要使用一些JavaScript。在小提琴中是2000
如果将鼠标悬停在滑块上,则可能需要使用一个具有不同值的变量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。