So erzielen Sie einen Karusselleffekt mit CSS

In CSS können Sie die Regel „@keyframes“ und das Attribut „animation“ verwenden, um Animationen zu definieren, um den Karussellwechseleffekt zu erzielen. Unter Animation versteht man den Effekt, dass ein Element schrittweise von einem Stil zum anderen wechselt. Eine oder mehrere Animationen können durch das Setzen mehrerer Knoten präzise gesteuert werden, was häufig zur Erzielung komplexer Animationseffekte verwendet wird.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Leistungsfähigkeit von CSS3-Animationseffekten ist seit ihrer Einführung nicht geringer. Ihre Vor- und Nachteile im Vergleich zu JS-Animationen sind auch in der Front-End-Branche umstritten Die Verwendung von CSS3-Animationen hat die Auswirkungen von CSS3-Animationen bis zu einem gewissen Grad reduziert. Die optimierte Codegröße erspart uns natürlich das lästige Debuggen von CSS-Animationen. Wir können nicht nur CSS3 verwenden, um alle Animationen zu simulieren. Darüber hinaus handelt es sich um ein Problem mit der Browserkompatibilität. Dieses Mal verwenden wir CSS3, um einen Karusselleffekt zu implementieren und die Leistungsfähigkeit von CSS3 zu erleben.

Zuallererst haben wir nur das automatische Karussell implementiert, und der Effekt ist der häufigste Ein- und Ausblendeffekt. Zumindest auf meinem aktuellen Niveau ist das automatische Karussell und die Klickrotation möglich Wenn es eine Möglichkeit gibt, beide Effekte gleichzeitig zu erzielen, lassen Sie es mich bitte wissen.

1. Layout

<section>
    <ul>
        <li>
        <li>
        <li>
        <li>
        <li>
    </ul>
</section>

Zum Stil gibt es zunächst nichts zu sagen: Die große Box des Sliders muss relativ positioniert sein. Bild im li-Tag, da dies möglich ist. Verwenden Sie reines CSS, um die Reaktionsfähigkeit zu implementieren. Um das gesamte Bild in der Reaktionsfähigkeit zu sehen, muss außerdem die Hintergrundgröße verwendet werden: 100% Offensichtlich muss der Slider-Container mit der Höhe von li übereinstimmen, da die Höhe zwangsläufig nicht festgelegt werden kann. Daher ist es offensichtlich nicht möglich, dieses Problem zu lösen kann im Abstand angezeigt werden. Zweitens basiert die %-Einheit im Abstand auf der Breite des übergeordneten Elements.

*{
      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);
}

2. Design-Animation

Der Ein- und Ausblendeffekt muss Deckkraft verwenden. Zunächst sind das Ein- und Ausblenden aller Bilder die gleichen Animationen, aber die Zeit ist Anders. Zur Steuerung muss Animation-Iteration-Count: Infinite für die unendliche Rotation der Animation verwendet werden. Die gesamte Animation ist in zwei Effekte unterteilt Das folgende Bild dient zur Darstellung des Ein- und Ausblendvorgangs.

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. Zu diesem Zeitpunkt ist es offensichtlich die Deckkraft: 0 ;

Um das Schreiben von Animationen zu erleichtern, verwenden wir die lineare Funktion für Animationen, d dauert 1 Sekunde, die in Prozentsätze umgewandelt werden, die 15 % und 5 % betragen. Der nächste Schritt besteht darin, jedem Bild eine Animationsverzögerung hinzuzufügen. Da das erste Bild vorne angezeigt werden muss, verwenden die anderen Bilder Opazität: 0 durch den benachbarten Geschwisterselektor. Das erste Bild muss nicht ein- und ausgeblendet werden. Der direkte Sprung zum Bleiben beträgt 5 %, sodass die Animationsverzögerung -1 s beträgt, und das zweite Kapitelbild ist 20 % vom ersten entfernt 4 Sekunden, Animationsverzögerung beträgt 3 Sekunden usw.

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

unser Karussell zu diesem Zeitpunkt Das Bild kann sich bewegen

3. Karussellfokus hinzufügen Das Hinzufügen des Karussellfokus dient natürlich nicht zum Klicken, sondern um es den Besuchern mitzuteilen Wie viele Bilder es gibt und die aktuelle Position des Bildes. Zumindest für mich persönlich ist der Karussellfokus wichtig, denn wenn ich nicht weiß, wie viele Bilder sich im Karussell befinden und ich nicht darauf klicken kann, werde ich es tun Ich bin sehr unruhig und habe das Gefühl, dass ich nicht die gesamte Seite sehe. 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

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

<div>
<ul> 
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>

[Empfohlenes Tutorial:

CSS-Video-Tutorial

]

4. Kämmen des Codes

如果你维护过别人的代码你就会知道，代码梳理对于后期维护的重要性了，没有经过梳理的css代码，随心所欲写到哪里就是哪里，对于后期维护来说简直就是一场灾难，css代码梳理个人认为首先必须添加必要的注释，将css代码分区，另外就是尽量减少后期修改需要修改的地方，这个主要是代码重构的问题，这个问题我已经在编写代码的时候考虑到了，所以主要任务就是添加注释和告诉维护者代码最常修改的地方，我们遵循最常修改的代码放到最后的原则。
我们来分析一下我们的代码如果给别人用可能需要修改的地方，首先肯定是图片路径，所以我们把这个样式放在最后，然后是图片高度，轮播焦点的颜色，动画时间的设置（这里还涉及图片个数），轮播焦点的位置，当然轮播焦点大小也可能修改。重构后代码如下：

<div>
<ul> 
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>

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

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Karusselleffekt mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!