Fatal编程技术网
  • html/
  • Html 希望通过从页面顶部引入图像来实现滑动显示过渡

Html 希望通过从页面顶部引入图像来实现滑动显示过渡

html css

Html 希望通过从页面顶部引入图像来实现滑动显示过渡,html,css,css-transitions,Html,Css,Css Transitions,我只想在chrome上使用CSS创建一个过渡，它从一个图像开始，该图像是身体的全宽（不管是什么），然后让该图像从顶部向下滑动（不倾斜），然后慢慢向下推它下面的图像。也就是说，把它想象成一张棒球卡，从屏幕上方滑到屏幕前面，直到它达到最大高度。HTML基本上如下所示： <body> <img id='myimage' class='myimageclass' src=.../> <div>... lots more stuff ... </bod

我只想在chrome上使用CSS创建一个过渡，它从一个图像开始，该图像是身体的全宽（不管是什么），然后让该图像从顶部向下滑动（不倾斜），然后慢慢向下推它下面的图像。也就是说，把它想象成一张棒球卡，从屏幕上方滑到屏幕前面，直到它达到最大高度。HTML基本上如下所示：

<body>
  <img id='myimage' class='myimageclass' src=.../>
  <div>... lots more stuff
  ...
</body>


... 更多的东西
...
我尝试过改变高度，但这只会使图像从0x0开始，然后慢慢增大到全尺寸。我希望以某种方式让它填满身体宽度，然后向下滑动，直到完全露出

这是我的非工作css

<style>
  .myimageclass {
    height: 0%;
  }
  .myimageclass.fadeIn {
    height: 100%;
    transition: 2.0s height;
  }
</style>


.myimageclass{
身高：0%；
}
.myimageclass.fadeIn{
身高：100%；
过渡段：2.0s高度；
}
我的onReady中有一个东西，它只是将类fadeIn添加到图像标记中。

您可以使用CSS动画来设置容器元素的
top
属性的动画，有效地将整个内容块沿页面向下滑动，同时保留子元素的相对位置

它不是完美的，但它确实有一个可缩放到设备宽度的图像。它在Chrome上运行，但您可能希望在
动画
属性中添加供应商前缀

动画运行一次的关键是
动画填充模式：向前

$（文档）.ready（（）=>{
$（'.slide'）.addClass（'slide-anim'）；
});

html，
身体{
填充：0；
保证金：0；
}
.幻灯片{
位置：相对位置；
顶部：-200px；
}
.幻灯片动画{
动画：向下滑动1s线性向前；
}
.幻灯片图像{
显示：块；
高度：自动；
宽度：100%；
}
@关键帧向下滑动{
从{
顶部：-200px；
}
到{
排名：0；
}
}



你好页面内容

这是我的最后一段代码，但@frish确实做对了


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }

      .slide {
        position: relative;
        top: -50vh;
        animation: slideDown 4s linear forwards;
      }

      .slide-image {
        background-image: url("https://via.placeholder.com/800x800.jpg");
        background-size: cover;
        height: 50vh;
        width: 100vw;
      }

      @keyframes slideDown {
        from {
          top: -50vh;
        }
        to {
          top: 0;
        }
      }
    </style>

    <script type="application/javascript">
      $(document).ready(function() {
        $("#myimage").addClass("slideDown");
      });
    </script>
  </head>
  <body class="slide">
      <div>
        <img src="stars.jpeg" class="slide-image" id="myimage" />
      </div>
      <hr />
      <br />
      <img src="stars.jpeg" />

  <span>text of page</span>
  </body>
</html>




html，
身体{
填充：0；
保证金：0；
}
.幻灯片{
位置：相对位置；
顶部：-50vh；
动画：向下滑动4s线性向前；
}
.幻灯片图像{
背景图像：url（“https://via.placeholder.com/800x800.jpg");
背景尺寸：封面；
高度：50vh；
宽度：100vw；
}
@关键帧向下滑动{
从{
顶部：-50vh；
}
到{
排名：0；
}
}
$（文档）.ready（函数（）{
$（“#myimage”）.addClass（“slideDown”）；
});




第页正文

如果您要使用javascript添加
.fadeIn
，那么有什么特别的原因可以避免使用javascript解决方案吗？只是好奇：）我更喜欢CSS，因为我知道它是chrome的，CSS使它非常平滑，易于维护。谢谢@Frish。你是一个成绩优异的人，但不幸的是，这几乎是完美的，我正在努力得到我所需要的。两个问题：1）由于不适合这里的原因，我确实需要使用JavaScript启动它，并且它需要开始隐藏。2） 如果浏览器变得更窄，以后图像就不会失真。也就是说，如果浏览器变薄，图像需要变短。我会根据你所拥有的继续努力，但如果你有想法，我会非常感激。哦，而且，我不能使用背景图像，我需要在尸体后面贴上图像标签。简而言之，我正在构建一个chrome扩展，这对我来说非常棘手。嗯，您可以使用js将动画隔离到添加到元素的类中，从而触发动画。对于图像，您可以使用除
vh
以外的单元或可能的媒体查询来获得该效果。另外，我不确定它在演示中有多明显，但是
背景尺寸：cover应该保持图像的比例（虽然也许<代码>包含< /代码>在某些情况下可能更好）。不幸的是，我不知道Chrome扩展的局限性——考虑用这个事实来更新你的问题，添加一个标签，或者两者兼而有之：好的，再一次使用图像标签和JS触发器。