CSS3 How to achieve panoramic view

This article mainly and everybody introduced the CSS3 realizes the Panorama chart Special effect example code the related material, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

Basic code

HTML code:

<p class= "Panorama" ></p>

Start by defining 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 that the picture is higher than the height of the container, and the horizontal direction is automatic, that is, the left side of the picture is left.

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

Manually control animation execution

Now we realize that when the mouse hovers over the picture, let it move, the mouse left to make it static.

This property needs to be used animation-play-state: paused | running , which represents the two states of the animation: 暂停 and 运行 .

Full 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;  }}