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

将div动画移出屏幕右侧

可以通过CSS的动画属性和关键帧来实现。以下是一个示例的实现方式:

HTML代码:

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

CSS代码:

代码语言:txt
复制
.animated-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move-out 1s forwards;
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

解释:

  • 首先,我们创建了一个div元素,并为其添加了一个类名"animated-div"。
  • 接下来,在CSS中,我们定义了这个类名的样式。
  • 我们设置了div的宽度、高度和背景颜色。
  • 使用animation属性,我们将动画效果"move-out"应用于div元素,并设置了动画持续时间为1秒。
  • 在@keyframes规则中,我们定义了动画的关键帧。
  • 在0%的关键帧中,我们将div的水平位置设置为初始位置,即translateX(0)。
  • 在100%的关键帧中,我们将div的水平位置设置为右侧屏幕之外,即translateX(100%)。
  • 最后,我们使用forwards关键字,使得动画结束后div保持在最后一个关键帧的状态。

这样,当页面加载时,div元素会以1秒的动画效果从屏幕内部移动到屏幕右侧之外。

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

相关·内容

没有搜到相关的视频

领券