css to implement sliding

CSS is a commonly used web design language that can be used to achieve numerous web effects. Among them, the sliding effect is also a very common one. The following introduces some CSS methods to achieve sliding effects.

1. Use the transform attribute

Use the transform attribute to achieve translation, rotation, scaling and other effects. Among them, in translation animation, you can use translateX() and translateY() to control the horizontal and vertical movement of elements.

The sample code is as follows:

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s ease;
  }

  .box:hover {
    transform: translateX(100px);
  }
</style>

<div class="box"></div>

This code implements the effect that when the mouse hovers over the box, it will move 100px from the original position to the right with an easing effect of 0.5 seconds. Among them, in the pseudo-class of .box:hover, translateX() is used to control the translation of the element on the X axis.

2. Use animation attribute

Use animation attribute to achieve more complex animation, in which we can set key frames and control the animation effect of elements.

The sample code is as follows:

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slide 1s ease-in-out infinite alternate;
  }

  @keyframes slide {
    from {
      transform: translateX(0px);
    }
    to {
      transform: translateX(100px);
    }
  }
</style>

<div class="box"></div>

This code defines an animation called slide to achieve the effect of the box sliding from left to right. Among them, the animation attribute is used to configure the animation, and set the easing effect, infinite playback and back-and-forth gradient. In the slide animation defined by the @keyframes keyword, we control the initial state and final state of the element through from and to, thereby achieving the sliding effect.

Summary

With the transform property and animation property provided in CSS, we can easily achieve the sliding effect of elements. In actual development, you can choose according to specific needs to achieve the best effect and user experience.

The above is the detailed content of css to implement sliding. For more information, please follow other related articles on the PHP Chinese website!