Detaillierte Einführung in ein Beispiel eines Karusselleffekts, der mit reinem CSS3 erzielt wird

In diesem Artikel wird hauptsächlich das Beispiel der Realisierung des Karusselleffekts mit reinem CSS3 vorgestellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen

Schauen wir uns zunächst die Demo an, klicken Sie, um die Demo anzusehen

Sagen Sie einfach ein paar Worte

Die Leistungsfähigkeit von CSS3-Animationseffekten ist seit ihrer Einführung nicht geringer. Auch ihre Vor- und Nachteile im Vergleich zu JS-Animationen sind in der Frontend-Branche umstritten Es besteht kein Zweifel, dass das Aufkommen der CSS3-Animation die Auswirkungen der CSS3-Animation bis zu einem gewissen Grad verringert hat. Sie verringert die Schwierigkeit, Animationseffekte zu realisieren, und erleichtert das Front-End-Lernen Natürlich haben CSS-Animationseffekte ihre Grenzen. Wir können nicht einfach alle Animationen simulieren. Dieses Mal verwenden wir CSS3, um einen Karusselleffekt zu implementieren und die Leistungsfähigkeit von CSS3 zu erleben. Erstens haben wir nur das automatische Karussell implementiert, und der Effekt ist der häufigste Ein- und Ausblendeffekt. Wir haben den Klick-Rotationseffekt nicht implementiert. Zumindest auf meinem aktuellen Niveau kann ich nur einen von automatischem Karussell und Klick auswählen Rotation mit reinem CSS3. Wenn es eine Möglichkeit gibt, beide Effekte gleichzeitig zu erzielen, sagen Sie mir bitte.

2. Layout

<section class="slider-contaner">
    <ul class="slider">
        <li class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
</section>

Zum Stil gibt es zunächst nichts zu sagen Das große Feld des Schiebereglers muss relativ positioniert sein. Darüber hinaus verwenden wir das Hintergrundbild im Li-Tag, da auf diese Weise reines CSS verwendet werden kann, um die Reaktionsfähigkeit zu verbessern In der Reaktionsfähigkeit muss das Hintergrundbild die Hintergrundgröße verwenden: 100%, und das andere ist das Höhenproblem. Offensichtlich muss der Slider-Container mit der Höhe von li übereinstimmen, da die Höhe im reaktionsfähigen Stil nicht festgelegt werden darf. Daher ist die Verwendung des Höhenattributs offensichtlich nicht möglich. Erstens kann das Hintergrundbild im Padding angezeigt werden, und zweitens basiert die Einheit von % im Padding auf der Breite des übergeordneten Elements Element.

*{
      margin:0;
      padding:0;
}
ul,li{
      list-style: none;
}
.floatfix {
      *zoom: 1;
}
.floatfix:after {
      content: "";
      display: table;
      clear: both;
}
.slider-contaner{
      width:100%;
      position:relative;
}
.slider,.slider-item{
      padding-bottom:40%;
}
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
.slider-item1{
      background-image:url(imgs/1.jpg);
}
.slider-item2{
      background-image:url(imgs/2.jpg);
}
.slider-item3{
      background-image:url(imgs/3.jpg);
}
.slider-item4{
      background-image:url(imgs/4.jpg);
}
.slider-item5{
      background-image:url(imgs/5.jpg);
}

3. Design-Animation

Der Ein- und Ausblendeffekt muss zunächst die Deckkraft nutzen -Ein und Ausblenden aller Bilder sind als Ganzes die gleiche Animation, aber die Zeit ist unterschiedlich. Die unendliche Rotation der Animation muss verwendet werden Diesmal sind es 5 Bilder. Die gesamte Animation ist in zwei Teile unterteilt: Bild bleiben und ein- und ausblenden. Dieser Effekt wird durch die Abbildung unten dargestellt, und der Pfeil zeigt den Ein- und Ausblendvorgang an.

Da es in CSS3 kein Attribut gibt, das das Zeitintervall zwischen zwei Animationen angibt, müssen wir den Effekt des Bildes beim Ein- und Ausblenden anderer Bilder in die Animation schreiben . Offensichtlich ist es zu diesem Zeitpunkt opacity: 0; für die Animation verwenden wir eine lineare Funktion, das heißt, der gesamte Vorgang dauert 20 Sekunden, und Ein Ein- und Ausblenden dauert 1 Sekunde, was in einen Prozentsatz umgerechnet wird.

@keyframes fade{
0%{
      opacity:0;
      z-index:2;
}
5%{
      opacity:1;
      z-index: 1;
}
20%{
      opacity:1;
      z-index:1;
}
25%{
      opacity:0;
      z-index:0;
}
100%{
      opacity:0;
      z-index:0;
}
}

Der nächste Schritt besteht darin, eine Animation hinzuzufügen. Verzögerung für jedes Bild, da das erste Bild vorne angezeigt werden muss, damit das andere Bild durch die Verwendung von opacity:0 über den benachbarten Geschwisterselektor nicht ein- und ausgeblendet werden muss und direkt zum Anschlag springt 5 %, also beträgt die Animationsverzögerung -1 s, und das zweite Kapitelbild ist 20 % vom ersten Bild entfernt. Das heißt, 4 s, die Animationsverzögerung beträgt 3 s und so weiter

.slider-item + .slider-item{
      opacity:0;
}
.slider-item1{
      animation-delay: -1s;
}
.slider-item2{
      animation-delay: 3s;
}
.slider-item3{
      animation-delay: 7s;
}
.slider-item4{
      animation-delay: 11s;
}
.slider-item5{
      animation-delay: 15s;
}

Zu diesem Zeitpunkt kann unser Karussellbild verschoben werden

4. Karussellfokus hinzufügen

Karussellfokus hinzufügen Natürlich nicht für Klicks, sondern um Besuchern mitzuteilen, wie viele Bilder es gibt und an welcher aktuellen Position sich das Bild befindet, zumindest für mich persönlich. Für mich ist der Fokus des Karussells sehr wichtig, denn wenn ich nicht weiß, wie viele Bilder im Karussell sind und ich nicht darauf klicken kann, werde ich sehr unruhig und habe das Gefühl, dass ich nicht die gesamte Seite gesehen habe. Fügen wir also den Karussell-Fokus hinzu. Zunächst ist klar, dass die obige Animation weiterhin verwendet werden kann. Darüber hinaus muss das Layout „position: absolute“ verwenden. Außerdem müssen wir den Fokus zweimal schreiben, einmal für den Stil des aktuellen Bildes , und einmal für den Stil des nicht aktuellen Bildes

<p class="focus-container">
<ul class="floatfix"> 
<li><p class="focus-item focus-item1"></p></li>
<li><p class="focus-item focus-item2"></p></li>
<li><p class="focus-item focus-item3"></p></li>
<li><p class="focus-item focus-item4"></p></li>
<li><p class="focus-item focus-item5"></p></li>
</ul>
</p>

.focus-container{
      position:absolute;
      bottom:2%;
      z-index:7;
      margin:0 auto;
      left:0;
      right:0;
}
.focus-container ul{
      margin-left:46%;
}
.focus-container li{
      width:10px;
      height:10px;
      border-radius:50%;
      float:left;
      margin-right:10px;
      background:#fff;
}
.focus-item{
      width:100%;
      height:100%;
      background:#51B1D9;
      border-radius:inherit;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-name:fade;
      animation-iteration-count: infinite;
}
.focus-item1{
      animation-delay: -1s;
}
.focus-item2{
      animation-delay: 3s;
}
.focus-item3{
      animation-delay: 7s;
}
.focus-item4{
      animation-delay: 11s;
}
.focus-item5{
      animation-delay: 15s;
}

5. Code-Kämmen

Wenn Sie den Code anderer Leute gepflegt haben, wissen Sie, dass Code-Kämmen in Bezug auf die Bedeutung der Nachwartung der CSS-Code, der nicht aussortiert wurde, überall dort geschrieben werden kann, wo Sie möchten. Es ist einfach eine Katastrophe für die Nachbearbeitung. Beim Sortieren des CSS-Codes muss man meiner Meinung nach zunächst die erforderlichen Kommentare hinzufügen und den CSS-Code aufteilen. Dies ist hauptsächlich eine Frage der Code-Umgestaltung Ich habe dieses Problem bereits beim Schreiben des Codes berücksichtigt, daher besteht die Hauptaufgabe darin, Kommentare hinzuzufügen und den Betreuern die am häufigsten geänderten Stellen im Code mitzuteilen. Wir folgen dem Prinzip, den am häufigsten geänderten Code an die letzte Stelle zu setzen.

我们来分析一下我们的代码如果给别人用可能需要修改的地方，首先肯定是图片路径，所以我们把这个样式放在最后，然后是图片高度，轮播焦点的颜色，动画时间的设置（这里还涉及图片个数），轮播焦点的位置，当然轮播焦点大小也可能修改。重构后代码如下：

<p class="focus-container">
<ul class="floatfix"> 
<li><p class="focus-item focus-item1"></p></li>
<li><p class="focus-item focus-item2"></p></li>
<li><p class="focus-item focus-item3"></p></li>
<li><p class="focus-item focus-item4"></p></li>
<li><p class="focus-item focus-item5"></p></li>
</ul>
</p>

/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*设置轮播焦点的位置*/
.focus-container{
bottom:2%;
}
/*设置当前图片焦点的颜色*/
.focus-item{
background:#51B1D9;
}
/*设置动画，请根据实际需要修改秒数*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1{
background-image:url(imgs/1.jpg);
}
.slider-item2{
background-image:url(imgs/2.jpg);
}
.slider-item3{
background-image:url(imgs/3.jpg);
}
.slider-item4{
background-image:url(imgs/4.jpg);
}
.slider-item5{
background-image:url(imgs/5.jpg);
}
/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}

六、最后扯两句

这种css3实现的轮播图，缺点也是不言而喻，点击轮换和自动轮换两者只能选其一，不过自动轮换可以用在手机端，这是一个不错的选择，另外，现在的网站大都是通栏设计，网页文字很少，尤其是网站首页更是如此，有时候比的不是网站设计的优劣，反而是谁选的图片好看，谁就有可能受到青睐，这种情况我们其实可以考虑将轮播图变为背景的轮换，这时候轮播焦点也就可以不使用了，相信你的博客首页或者产品首页使用背景轮换，效果会非常不错的。  

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in ein Beispiel eines Karusselleffekts, der mit reinem CSS3 erzielt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!