How to achieve image scrolling effect with CSS3 (with code)

CSS3 realizes the image scroll wheel effect

In normal times, we use some scrolling image effects, which are all implemented with javascript code (JQuery), but In today's era when Html5 and CSS3 are prevalent, JavaScript code can be replaced to achieve some common effects to improve the loading speed of web pages, making the experience more friendly to users.

Especially in the current era when WeChat platform development is relatively hot, replacing HTML5 CSS3 with the same effect will bring a more wonderful mobile terminal experience. For example, this article will introduce the CSS3 image scroll wheel effect.

The knowledge points in this article come from W3School official documents and CSS3 @keyframes rules.

Address link: http://www.w3school.com.cn/css3/css3_animation.asp

Grammar rules:

@keyframes 
animationname
 {
keyframes-selector
 {
css-styles
;}}

AnimationAnimationname is the name of the animation, developed by User-defined, keyframes-selector is the percentage of animation duration (you can control its movement speed).

Principle: There is a large p nested inside a small p. The small p is the same height and width as the single picture to be displayed. Inside the large p is a horizontal list containing all the pictures to be displayed. During execution, picture switching is achieved by changing the horizontal position of the big p (moving the width of one picture to the left or right each time).

Html key code:

<p class="container">
 
<p class="img">
 
<ul class="nav">
 
<li><a href="#"><img src="imgs/logo.png"></a></li>
 
<li><a href="#"><img src="imgs/name.png"></a></li>
 
<li><a href="#"><img src="imgs/mmc.png"></a></li>
 
</ul>
 
</p>
 
</p>

CSS style key code:

.nav{
 
width:2000px;
 
height:150px;
 
position:absolute;
 
left:0px;
 
top:0;
 
z-index:9;
 
animation:myfirst 6s infinite;
 
-webkit-animation:myfirst 6s infinite;
 
-0-animation:myfirst 6s infinite;
 
-moz-animation:myfirst 6s infinite;
 
}
 
@keyframes myfirst
 
{
 
0%   {left: 0px;}
 
26.6%   {left: 0px;}
 
36.6%   {left: -320px;}
 
63.2%   {left: -320px;}
 
73.2%   {left: -640px;}
 
99.7%   {left: -640px;}
 
100% {left: -0px;}
 
}

If you want to change the display form You need to adjust the percentage (image dwell time and scrolling speed) and moving distance.

CSS3 technology considers browser compatibility issues, so it is necessary to write styles for each browser, change the name to one, and keep the others the same.

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

Rolling algorithm optimization see demo

Demo demo link

http://wongletion.sinaapp.com/

This article is reproduced from: https://blog.csdn.net/u013741507/article/details/ 38779093

Recommended tutorial: "CSS Tutorial"

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