css3让移动div

CSS3 是一种用来修饰网页的语言，它可以使网页更加美观，而且还具有很多实用的功能。其中一个比较重要的功能就是让移动div。通过使用CSS3，我们可以使用一些动画效果，让div在页面中移动，并产生视觉上的吸引力。下面，我们就来学习如何利用CSS3实现移动div的效果。



.Box {
  width: 100px;
  height: 100px;
  background-color: #F44336;
  position: relative;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 100%;
  }
}

css3让移动div

首先，我们需要创建一个div，并设置它的宽度、高度、背景颜色和position属性。然后，我们在CSS中使用@keyframes关键字创建一个新的动画效果。在动画中，我们定义了3个关键帧，即0%、50%和100%。在第一个关键帧中，div的left属性值为0，表示div最开始时出现在页面的最左侧。在第二个关键帧中，我们将div的left属性值设置为50%，使它慢慢移动到页面的中央。在第三个关键帧中，我们将div的left属性值设为100%，让它从中央移动到最右侧，从而完成整个动画效果。

最后，在div的CSS中，我们将animation-iteration-count属性设置为infinite，表示动画将一直循环下去，直到页面关闭。我们还可以通过改变animation-duration和animation-timing-function属性的值来调整动画的速度和缓动效果。通过这些设置，我们就能够通过CSS3轻松实现div的移动效果了。

css3让移动div

相关文章