How to achieve panoramic effect using only CSS3

This article will bring you a css3 black technology: how to use only css to achieve the effect of a panorama?

Final effect demonstration: demo

　 Page layout

<p class="panorama"></p>

　Basic style

First define some basic styles and animations

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

Background-size: auto 100%; This code means to make the height of the image equal to the height of the container, and the horizontal direction is automatic, that is, the leftmost side of the image is attached to the left side of the container.

The process of executing animation is: cycle, alternation, linear and the time period is 10s.

　 Manually control animation execution

So far, when we open the webpage, a picture will appear horizontally sliding back and forth. But in this case, visitors may be attracted by the animation and ignore the real content.

Our requirement is to make it move when the mouse is hovering over the picture. Of course, we can easily achieve this effect.

Delete the previous animation and add the following style.

.panorama:hover,
.panorama:focus {
  animation: panorama 10s linear infinite alternate;
}

The current effect is: move the mouse into the picture and the picture starts to slide back and forth horizontally.

Animation optimization

Although the effect is achieved, you will find that when the mouse moves out of the picture, the picture immediately returns to the original position.

For us, this is a bit sudden. How to record the current position of the picture and continue to execute the animation when the mouse moves in?

We can rely on this attribute animation-play-state: paused | running, which represents the two states of animation: paused and running.

## Complete css code

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
  animation-play-state: paused;
}

.panorama:hover,
.panorama:focus {
  animation-play-state: running;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

The above is the detailed content of How to achieve panoramic effect using only CSS3. For more information, please follow other related articles on the PHP Chinese website!