【发布时间】：2021-06-13 16:27:57
【问题描述】：
我有一个名为滑块的类。我需要为不同的图像设置不同类型的动画。请帮助我实现它。现在我所有的图像都具有相同的动画模式。我只想保留一个类滑块. 这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0p;
padding:0p;
background: green;
perspective: 800px;
height: 100vh;
width: 100wh;
}
.slider{
/* background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 800px 800px;
width: 800px;
height: 800px;
border: 2px solid;
color: pink;
*/
width:100vw;
height:100vh;
background: url(b1.jpg);
background-size: 100wh 100vh;
/* animation: slide 2s infinite;*/
animation: slide
2s infinite;
margin: 100px auto;
}
@keyframes slide{
from{
/* transform:rotateY(0deg);*/
/* transform: rotate3d(1, 1, 1, 0deg);*/
transform: rotate3d(0, 1, 0, 0deg);
background-color: pink;
}
to{
/* transform:rotateY(180deg);
transform: rotate3d(1, 1, 1, 360deg);*/
transform: rotate3d(0, 1, 0, 360deg);
background-color: pink;
}
25%{
background-image: url(b2.jpg);
background-size: 100wh 100vh;
}
50%{
background-image: url(b3.jpg);
background-size: 100wh 100vh;
}
75%{
background-image: url(b4.jpg);
background-size: 100wh 100vh;
}
100%{
background-image: url(b5.jpg);
background-size: 100wh 100vh;
}
}
</style>
</head>
<body>
<div class="slider"></div>
</body>
</html>
这是小提琴
还有一个疑问，在每张图像中似乎都有图像重复，就好像同一张图像被缩小并且图像的一部分被添加到那里。我只想有一个 100% 视图而不是重复的图像.
任何帮助将不胜感激
【问题讨论】：
-
你的问题我不太清楚，请详细说明一下，至于图像重复，您可以将
no repeat添加到.slider，如.slider{background: url(b1.jpg) no repeat;} -
@Uzair 我正在尝试为不同的图像设置动画，因为关键帧从 0% 变为 25%，从 25% 变为 50% 等等……但是我怎样才能给出不同类型的动画。 . 好像第二张图片从 0 度旋转到 140 度，第三张图片像那样放大和淡出......这里每张图片都有相同的动画模型
-
如果你想应用不同的动画，那么我认为你必须定义另一个动画，即关键帧，然后分别在不同的图像类上使用它
-
感谢@Uzair 的建议..但没有重复不起作用jsfiddle.net/hellomidhun2020/wq5kptxu/4
-
它的
no-repeat实际上但是这样做只会显示一个图像并且它不会摆脱最后的部分，最后的部分也不是由于CSS，我只是因为视口，尝试放大和缩小，您会看到最后的图像将分别完全显示和部分显示
标签： html css animation slider slideshow