How to realize panoramic special effects with CSS3
This article introduces the knowledge of "how to use CSS3 to achieve panoramic effects". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
First define some basic styles and animation
.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%
}
}
Background-size: auto 100%; this code means that the image is higher than 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 performing animation is: cycle, alternation, linearity, and time period is 10s.
Manually control animation execution
So far, when we open the page, there will be a picture swiping back and forth horizontally. But in this way, visitors may be attracted by the animation and ignore the real content.
Our requirement is to let the mouse move when it hovers over the picture, and of course we can easily achieve this effect.
Delete the previous animation and add the following styles.
.panorama: hover
.panorama: focus {
Animation: panorama 10s linear infinite alternate
}
Copy the code
The effect now is: move the mouse into the picture and the picture begins to slide back and forth horizontally.
Optimization of animation
Although the effect has been achieved, you will find that when the mouse moves out of the picture, the picture immediately returns to its original position.
For us, this is a little sudden, how to record the current position of the picture and continue to perform the animation when the mouse is moved in?
We can rely on this attribute animation-play-state: paused | running, which represents the two states of the animation: pause and run.
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%
}
}
"how to use CSS3 to achieve panoramic effects" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
