純粋な CSS3 を使用して実現されるカルーセル効果の例の詳細な紹介

この記事では、純粋な CSS3 を使用してカルーセル効果を実現する例を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

まず、デモを見てみましょう。クリックしてデモを表示します

1. いくつかの言葉を言うだけです

CSS3 アニメーション効果の威力は自明です登場以来その人気は衰えず、フロントエンドコミュニティではjsアニメーションと比較したメリットとデメリットも議論の的となっていますが、css3アニメーションの登場によりアニメーション実現の難易度が下がったことは間違いありません。効率化されたコード サイズにより、煩わしい JS デバッグから解放されます。もちろん、CSS のアニメーション効果には制限があります。 css3 を使用してすべてのアニメーションをシミュレートする もう 1 つの問題は、ブラウザーの互換性です。今回は css3 を使用してカルーセル効果を実装し、css3 の威力を体験します。まず、自動カルーセルのみを実装しており、エフェクトも最も一般的なフェードインとフェードアウトです。少なくとも私の現在のレベルでは、自動カルーセルとフェードアウトのいずれか 1 つしか選択できません。純粋な CSS3 を使用して回転をクリックします。両方の効果を同時に実現する方法がある場合は、教えてください。

2. レイアウト

<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>

HTML コードについては言うことはありません。まず、スライダーの大きなボックスを相対的に配置する必要があります。さらに、背景を使用します。 li タグ内の画像、これが可能であるため、純粋な css を使用して応答性を実装します。また、応答性で全体像を明確に表示するには、背景画像に background-size:100% を使用する必要があります。明らかに、slider-container は li の高さと一致している必要があります。高さが固定できないのは避けられないため、height 属性を使用しても明らかに機能しません。まず、background-image がこの問題を解決します。次に、パディングの % 単位は親要素の幅に基づきます。

*{
      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. アニメーションをデザインする

フェードインとフェードアウトの効果は不透明度を使用する必要があります。まず、すべての画像のフェードインとフェードアウトは同じアニメーションですが、時間がかかります。これはアニメーション遅延を使用して行う必要があります。今回はアニメーションを無限に回転させるために、animation-iteration-count:infinite を使用する必要があります。フェードインとフェードアウト 次の図は、フェードインとフェードアウトのプロセスを表すために使用されます。

CSS3には2つのアニメーション間の時間間隔を指定する属性がないため、他の画像がアニメーションにフェードインおよびフェードアウトするときの画像の効果を記述する必要があります。明らかに、この時点では不透明度:0です。 ; アニメーションの利便性を記述するために、アニメーションは線形関数、つまりアニメーション タイミング関数を使用します。プロセス全体には 20 秒かかり、滞在には 3 秒かかり、フェードインとフェードアウトには 1 秒かかります。は 15% と 5% の割合に変換されます。

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

次のステップは、最初の画像を前面に表示する必要があるため、他の画像は不透明度:0 から 0 を使用します。隣接する兄弟セレクターは、最初の画像はフェードインおよびフェードアウトする必要はありません。直接ジャンプして滞在するのは 5% であるため、アニメーション遅延は -1 秒であり、2 番目のチャプター画像は最初の画像から 20% (4 秒) 離れています。アニメーション遅延は 3 秒などです

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

この時点では、カルーセル画像は移動できます

4. カルーセル フォーカスを追加します

カルーセル フォーカスを追加するのは、もちろんクリックのためではなく、少なくとも個人的には、訪問者に写真の枚数と写真の現在の位置を伝えます。私にとって、カルーセルの焦点は非常に重要です。なぜなら、カルーセルに写真が何枚あるかを知らなければ、それができないからです。それをクリックしないと、ページ全体を見ていないように感じて非常に不安になります。それでは、カルーセル フォーカスを追加しましょう。まず、上記のアニメーションが引き続き使用できることは明らかです。また、レイアウトでは、position:Absolute を使用する必要があります。さらに、現在の画像のスタイルに対して 1 回、フォーカスを 2 回記述する必要があることは明らかです。 、そして現在ではない画像のスタイルについて 1 回

<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. コードを精査する

他の人のコードをメンテナンスしたことがある場合は、後のメンテナンスのためにコードをソートすることの重要性がわかるでしょう。ソートされていないCSSコードは、後のメンテナンスのためにどこにでも書くことができますが、個人的には、CSSコードをソートするときに、最初に必要なコメントを追加してCSSコードを分割する必要があると思います。 、これは主にコードの再構築の問題であり、コードを書くときにすでに考慮されているため、主なタスクはコメントを追加することです。最も頻繁に変更されるコードを最後に置くという原則に従って、コードが最も頻繁に変更される場所を管理者に伝えます。

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

<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视频教程

以上が純粋な CSS3 を使用して実現されるカルーセル効果の例の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。