个人中心
gpt4 book ai didi

html - 有没有更简单的方法来使用一张图片，但在网站上多次显示，不同的定位？

转载 作者：行者123 更新时间：2023-12-04 08:31:32 31 4
gpt4 key购买 nike

我现在拥有的所有代码都在那里，我是 HTML 的初学者
所以，我希望这些所谓的“胡萝卜”图像从网站顶部掉下来作为“加载动画”，但到目前为止我想出的唯一方法是创建一个图像的多个版本，并且给它们一个不同的 ID，因为我需要每个胡萝卜在 X 坐标上的不同位置
我想通了如何给每张图片的方式相同的动画尽管如此，我已经完成了动画，我只需要一种方法来创建所有这些图像，没有 那么多代码，或者这是唯一的方法，而所有的图片，也需要在 X 坐标上的随机位置，或者你设置的任何位置。
这是我的 HTML 部分 

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
            <img id="carrot" src="images/carrot.png" alt="">
            <img id="carrot1" src="images/carrot.png" alt="">
            <img id="carrot2" src="images/carrot.png" alt="">
            <img id="carrot3" src="images/carrot.png" alt="">
        </div>
    
    </body>
    </html>
CSS 部分 
#carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot1 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -190px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot2 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -290px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot3 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -500px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}

最佳答案

我可以为 javascript 提供解决方案。由 createElement 使用，为图像分配 url 并分配一个类。请注意 mainContainer最初在 html 结构中为空。
此外，对于每个 carrot , .carrot:nth-child()伪类已添加到 css 以分配唯一规则 right .

var container = document.querySelector('#mainContainer'); 

for(var i = 0; i < 4; i++) { 
  var img = document.createElement('img'); 
  img.className = 'carrot';
  img.src = 'https://banner2.cleanpng.com/20180620/gl/kisspng-monument-valley-2-level-cheating-in-video-games-5b29fd2c754be5.5312592115294784444805.jpg';
  container.append(img);
}
.carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.carrot:nth-child(1) {
  right: -10px;
}

.carrot:nth-child(2) {
  right: -190px;
}

.carrot:nth-child(3) {
  right: -290px;
}

.carrot:nth-child(4) {
  right: -500px;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
         
        </div>
    
    </body>
    </html>

关于html - 有没有更简单的方法来使用一张图片，但在网站上多次显示，不同的定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64996460/

31 4 0
文章推荐： python - 按键分组并创建相应值的列表
文章推荐： function - Maxima:如何区分矩阵的一行和行向量？
文章推荐： 关于练习题的Python初学者问题
文章推荐： django - 在 Django 中对缓存和 django-channels channel 层使用相同的 Redis 存储是否可以？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com