How to realize the animation effect of panorama with CSS3 (with code)

The content of this article is about how to realize the animation effect of panorama in CSS3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Basic code

html code:

<div class="panorama"></div>

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 picture equal to the height of the container, and the horizontal direction is automatic, that is, the leftmost side of the picture is attached to the left side of the container.

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

Manual control of animation execution

Now we realize that when the mouse is hovering over the picture, it will move, and when the mouse leaves, it will stop.

You need to use this attributeanimation-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;
  }
}

Related recommendations:

How to use pure CSS3 to achieve the effect of image carousel

How to use pure CSS to achieve the effect of rainbow striped text (with code)

The above is the detailed content of How to realize the animation effect of panorama with CSS3 (with code). For more information, please follow other related articles on the PHP Chinese website!