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>

.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.

Manual control of animation execution

animation-play-state: paused | running, which represents the two states of animation: paused and running .

##

.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 implement panorama in CSS3. For more information, please follow other related articles on the PHP Chinese website!