我正在努力在CSS中制作线性动画

I'm struggling making a linear animation in CSS


我正在努力在CSS中制作线性动画 已获得1个解决方法 2020-08-19 07:09:04 html

我一直试图用不同的电影和节目重现苹果电视Plus页面上使用的效果,有一种 “线性” 动画,内容无限,悬停时会变慢.

( https://github.com/binance-us/binance-official-api-docs/blob/master/rest-api.md#signed-trade-and-user_data-endpoint-security )

然而,我使用了十年前在代码网站上发布的简单代码,但我认为这不是正确的选择,因为,我还没能用一个真正的 “无限”效果就像一旦列表的最后一项到达页面的左边框,它就会重新启动,而不是进行循环.另外,我试图在悬停时减慢动画,但它只是在页面上跳跃,没有过渡或其他任何东西.我有点迷路了,非常新手,所以我真的很感激任何帮助.

下面是我的代码:

 button.lol { border: none; background-color: transparent; } div.asd { width: 100%; padding: 50px 0; text-align: center; background-color: white; border: 5px solid gray; border-radius: 10px; margin-top: 20px; width: 600px; height: 150px; } button.da { background-color: purple; /* Green */ border: none; border-radius: 10px; color: white; padding: 30px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; float: left; margin-left: 10px; margin-top: -30px; } 
 <!DOCTYPE html> <html> <head> <title>Whitecat</title> <link rel="stylesheet" type="text/css" href="c23123.css"> </head> <body> <button class="lol" type="button" onclick="document.getElementById('la').style.visbility = 'visible'"> <img id="kekw" src="https://cdn.discordapp.com/attachments/727628556984778826/739554077653991504/unknown.png"> </button> <div id="la" class="asd" style="visibility: hidden;"> <div> <button class="da" onclick="document.getElementById('kekw').src = 'https://cdn.discordapp.com/attachments/729617930676863036/739587035043594260/unknown.png'"></button> </div> </div> </body> </html> 


我正在努力在CSS中制作线性动画 方法1

你不能用css动画做你想做的事情.在最后一个模块之后,您无法进行 “无限” 转换 “重新加载” 内容队列.但是旋转木马/滑块库并不难.

我总是使用类滑块对我来说,这是最容易实现的,简单的工作,但仍然有大量的选项来轻松定制它.

检查我在这里为你做的例子JSfiddle

但是.如果你想在悬停时操纵动画 speed ,你可能需要使用一点javascript.小提琴里的是 2000 .如果悬停在滑块上,您可能需要在那里使用具有不同值的变量.


.htaccess .net .net-core 2d 3d actions-on-google actionscript-3 activemq acumatica adobe-xd aframe ag-grid air airflow ajax akka alexa algorithm alignment allure amadeus amazon-cognito amazon-deequ amazon-dynamodb amazon-ec2 amazon-redshift amazon-s3 amazon-web-services amcharts amcharts4