How to implement panorama in CSS3

This article mainly introduces to you the relevant information about the CSS3 panorama special effect sample code. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Basic code

html code:

##

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

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 picture The far left side is against 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 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;
  }
}

Related recommendations:

How to implement a panorama using only CSS3 Effect

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