分类导航
程序笔记程序问答

将不同的动画应用于单个类中的多个背景图像

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了将不同的动画应用于单个类中的多个背景图像，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将不同的动画应用于单个类中的多个背景图像？

开发过程中遇到将不同的动画应用于单个类中的多个背景图像的问题如何解决？下面主要结合日常开发的经验，给出你关于将不同的动画应用于单个类中的多个背景图像的解决方法建议，希望对你解决将不同的动画应用于单个类中的多个背景图像有所启发或帮助；

我有一个名为滑块的类。我需要为不同的图像使用不同类型的动画。请帮助我实现它。现在我所有的图像都具有相同的动画模式。我只想保留一个类滑块. 这是我的代码

<!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>

这是小提琴

@H_472_2@my fiddle

在每张图像中还有一个疑问，似乎有图像重复，好像同一图像被缩小并且图像的一部分被添加到那里。我只想拥有一张 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 秒的静止时间。

如果这是一个问题，你会发现你需要调整不透明度来阻止非常突然的变化。

这段代码每次都会重复变换和不透明度设置，这并不总是必要的，但我发现它可以提醒变换需要其中的所有设置，它不是“累积的”。

大佬总结

以上是大佬教程为你收集整理的将不同的动画应用于单个类中的多个背景图像全部内容，希望文章能够帮你解决将不同的动画应用于单个类中的多个背景图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：将不同的动画应用于单个类中的多个背景图像
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap