如何解决将不同的动画应用于单个类中的多个背景图像
我有一个名为滑块的类。我需要为不同的图像使用不同类型的动画。请帮助我实现它。现在我所有的图像都具有相同的动画模式。我只想保留一个类滑块. 这是我的代码
<!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,0deg);*/
transform: rotate3d(0,0deg);
background-color: pink;
}
to{
/* transform:rotateY(180deg);
transform: rotate3d(1,360deg);*/
transform: rotate3d(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% 视图而不是重复的图像.
任何帮助将不胜感激
解决方法
这称为滑块,查看关键帧定义似乎您想使用一个动画按顺序旋转一组图像,而不是每个图像的不同动画。只要您不希望每个“幻灯片”的动画完全不同,Tfhis 是可行的。
几点: 你的“怀疑”是有道理的。图像被重复,因为这是 CSS 中的默认背景,将其设置为“不重复”,这样你就不会得到额外的一点点。
图像可能(也可能不,取决于您的用例,但一般而言)具有不同的纵横比,并且它们可能与视口的纵横比(包含元素用于设置其尺寸)不同或不同.使用 background-size: contain
确保您看到每个图像的整个图像,或者使用 cover
如果您想覆盖整个视口,但在这种情况下,顶部和底部或侧面可能会被裁剪为合身
您可能希望 background-position
水平和垂直居中,而不是在这种情况下默认为左和上。
这是一个改变的片段。请注意,尺寸会在您可能想要也可能不想要的短时间内发生变化。你可以改变关键帧来阻止它(如果你需要帮助,请告诉我)。此外,最后一张图片没有时间显示自己,因此您可能需要查看 % 设置以确保它被查看。
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(https://picsum.photos/id/1023/300/300);
background-repeat: no-repeat no-repeat;
/* ADDED */
background-position: center center;
/* ADDED */
background-size: cover;
/* ADDED - TRY BOTH TO DECIDE WHICH YOU WANT IF YOU HAVE IMAGES OF DIFFERENT ASPECT RATIOS */
background-size: contain;
/* ADDED */
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,0deg);*/
transform: rotate3d(0,0deg);
background-color: pink;
}
to {
/* transform:rotateY(180deg);
transform: rotate3d(1,360deg);*/
transform: rotate3d(0,360deg);
background-color: pink;
}
25% {
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: 100wh 100vh;
}
50% {
background-image: url(https://picsum.photos/id/1016/768/1024);
background-size: 100wh 100vh;
}
75% {
background-image: url(https://picsum.photos/id/1018/200/300);
background-size: 100wh 100vh;
}
100% {
background-image: url(https://picsum.photos/id/1020/300/300);
background-size: 100wh 100vh;
}
}
<div class="slider"></div>
更新 在上面的片段中,每个图像都获得相同的动画。要求是每个都有自己的(旋转、缩放等)。这可以通过让关键帧的每个部分定义特定幻灯片的动画来实现,同时仍然保持单个滑块类的要求。
在此代码段中有 4 张幻灯片,每张幻灯片占用一次动画迭代总时间的四分之一。在每个部分中都定义了所需的特定动画。此代码段假定您希望在图像显示的一半时间内执行动画位,而在剩余的一半时间内不移动。可以通过更改关键帧中的 %s 来更改这些时间。
第一张图片旋转,第二张图片放大,第三张图片从 0 不透明度进入,第四张图片只显示没有移动。
显然可以添加更多图像,并通过更改 %s 和插入更多背景图像来定义不同类型的移动、缩放、不透明度。
注意:不透明度是指整个元素,所以背景粉红色也褪色了,看起来很奇怪,所以我把它删除了。如果背景很重要,您将不得不考虑一个额外的元素并为其设置动画,或者决定不使用不透明度作为改变的事物之一,或者无论如何都将绿色变为粉红色。
body {
margin: 0p;
padding: 0p;
background: green;
perspective: 800px;
height: 100vh;
width: 100wh;
}
.slider {
width: 100vw;
height: 100vh;
background-repeat: no-repeat no-repeat;
/* ADDED */
background-position: center center;
/* ADDED */
background-size: cover;
/* ADDED - TRY BOTH TO DECIDE WHICH YOU WANT IF YOU HAVE IMAGES OF DIFFERENT ASPECT RATIOS */
background-size: contain;
/* ADDED */
animation: slide 16s infinite;
margin: 100px auto;
}
@keyframes slide {
0% {
transform: rotate3d(0,0deg);
opacity: 1;
background-image: url(https://picsum.photos/id/1023/300/300);
}
12.5%,24.99% {
/* to make the slide not move between those times */
transform: rotate3d(0,360deg);
opacity: 1;
background-image: url(https://picsum.photos/id/1023/300/300);
}
25% {
transform: rotate3d(0,0deg) scale(1);
opacity: 1;
background-image: url(https://picsum.photos/id/1015/1024/768);
}
37.5%,49.99% {
/* so it scales up for the first half of its time,then stays there showing */
transform: rotate3d(0,0deg) scale(1.5);
opacity: 1;
background-image: url(https://picsum.photos/id/1015/1024/768);
}
50% {
transform: rotate3d(0,0deg) scale(1);
opacity: 0;
background-image: url(https://picsum.photos/id/1016/768/1024);
}
74.99% {
transform: rotate3d(0,0deg) scale(1);
opacity: 1;
background-image: url(https://picsum.photos/id/1016/768/1024);
}
75% {
transform: rotate3d(0,0deg) scale(1);
opacity: 1;
background-image: url(https://picsum.photos/id/1018/200/300);
}
100% {
transform: rotate3d(0,0deg) scale(1);
opacity: 1;
background-image: url(https://picsum.photos/id/1018/200/300);
}
}
<div class="slider"></div>
整个动画有 16 秒的时间,让每个图像有 2 秒的移动时间和 2 秒的静止时间。
如果这是一个问题,你会发现你需要调整不透明度来阻止非常突然的变化。
这段代码每次都会重复变换和不透明度设置,这并不总是必要的,但我发现它可以提醒变换需要其中的所有设置,它不是“累积的”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。