首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从屏幕外动画一个div,没有绝对位置?

从屏幕外动画一个div,没有绝对位置,可以通过CSS动画和过渡效果来实现。以下是一个示例代码:

HTML代码:

代码语言:txt
复制
<div class="container">
  <div class="animated-div"></div>
</div>

CSS代码:

代码语言:txt
复制
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.animated-div {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: slide-in 1s forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

解释:

  • 首先,创建一个包含动画的div的容器,设置容器的宽度和高度为100%以充满整个屏幕。
  • 接下来,创建一个具有动画效果的div,设置其初始位置为屏幕外左侧(translateX(-100%)),并通过动画属性(animation)和关键帧(@keyframes)来定义动画效果。
  • 在关键帧中,将div从屏幕外左侧移动到屏幕内(translateX(0))。
  • 最后,将动画应用于div元素(animation: slide-in 1s forwards),使其在1秒内完成动画,并保持在最终位置。

这样,当页面加载时,div元素将从屏幕外左侧滑动进入屏幕内。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券