So erzielen Sie einen Bildlaufeffekt mit CSS3 (mit Code)

CSS3, um einen Bild-Scrollrad-Effekt zu erzielen

In normalen Zeiten verwenden wir einige Bildlaufeffekte, die alle mit Javascript-Code implementiert werden ( JQuery), aber in der heutigen Zeit, in der HTML5 und CSS3 weit verbreitet sind, kann JavaScript-Code ersetzt werden, um einige gemeinsame Effekte zu erzielen, um die Ladegeschwindigkeit von Webseiten zu verbessern und das Erlebnis benutzerfreundlicher zu machen.

Besonders in dieser Zeit, in der die Entwicklung der WeChat-Plattform relativ heiß ist, wird der Ersatz durch HTML5+CSS3 ein wunderbareres mobiles Terminal-Erlebnis mit dem gleichen Effekt bringen. In diesem Artikel wird beispielsweise der CSS3-Bildscrollradeffekt vorgestellt.

Die Wissenspunkte in diesem Artikel stammen aus offiziellen Dokumenten von W3School und CSS3 @keyframes-Regeln.

Adresslink: http://www.w3school.com.cn/css3/css3_animation.asp

Grammatikregeln:

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

Animationsname ist der Name der Animation, Entwickelt von User-Defined, ist der Keyframes-Selektor der Prozentsatz der Animationsdauer (Sie können die Bewegungsgeschwindigkeit steuern).

Prinzip: In einem kleinen p ist ein großes p verschachtelt. Das kleine p hat die gleiche Höhe und Breite wie das einzelne anzuzeigende Bild. Innerhalb des großen p befindet sich eine horizontale Liste mit allen anzuzeigenden Bildern Während der Ausführung wird der Bildwechsel durch Ändern der horizontalen Position des großen p erreicht (jedes Mal wird die Breite eines Bildes nach links oder rechts verschoben).

HTML-Schlüsselcode:

<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-Stil-Schlüsselcode:

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

Wenn Sie die Präsentationsform ändern möchten Sie müssen den Prozentsatz (Bildverweildauer und Scrollgeschwindigkeit) und die Bewegungsdistanz anpassen.

Die CSS3-Technologie berücksichtigt Browserkompatibilitätsprobleme, daher ist es notwendig, Stile für jeden Browser zu schreiben. Der Name wird in diesen geändert, die anderen sind gleich.

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

Siehe Demo

Demo-Demo-Link

http://wongletion.sinaapp.com/

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Bildlaufeffekt mit CSS3 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!