순수 CSS3를 사용하여 달성한 캐러셀 효과의 예에 대한 자세한 소개

이번 글은 순수 CSS3를 이용하여 캐러셀 효과를 구현한 사례를 중심으로 소개하고 있습니다. 편집자는 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터 따라가서 보세요

먼저 데모를 보시죠, 클릭해서 데모를 보세요

말 몇 마디만 해주세요

CSS3 애니메이션 효과의 위력은 자명합니다. JS 애니메이션에 비해 그 인기가 줄어들지 않았으며 프론트엔드 커뮤니티에서도 논쟁의 여지가 있었습니다. CSS3 애니메이션의 출현으로 CSS3 애니메이션의 영향이 어느 정도 줄어들었다는 점은 의심할 여지가 없습니다. 애니메이션 효과를 구현하는 데 따른 어려움이 줄어들고 간소화된 코드 크기 덕분에 귀찮은 js 디버깅도 가능해졌습니다. 물론 CSS 애니메이션 효과에는 한계가 있습니다. CSS3를 사용하여 모든 애니메이션을 시뮬레이션할 수는 없습니다. 이번에는 CSS3를 사용하여 캐러셀 효과를 구현하고 CSS3의 강력함을 경험해 보겠습니다. 우선 자동 캐러셀만 구현했고 효과는 가장 일반적인 페이드 인 및 페이드 아웃입니다. 적어도 현재 레벨에서는 자동 캐러셀 중 하나만 선택하고 클릭할 수 있습니다. 순수 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>

스타일 측면에서는 우선 큰 박스는 말할 것도 없습니다. 또한, 반응성에서 전체 그림을 명확하게 보기 위해 순수한 CSS를 사용할 수 있기 때문에 li 태그에 배경 이미지를 사용합니다. , 배경 이미지는 background-size:100%를 사용해야 합니다. 또 다른 문제는 높이입니다. 반응형 스타일에서는 높이를 고정할 수 없으므로 슬라이더 컨테이너는 분명히 높이와 일치해야 합니다. 패딩 속성은 이 문제를 해결할 수 있습니다. 첫째, 패딩에 배경 이미지를 표시할 수 있습니다. 둘째, 패딩의 % 단위는 상위 요소의 너비를 기준으로 합니다.

rree

3. 애니메이션 디자인

페이드인 및 페이드아웃 효과는 우선 페이드인을 사용해야 합니다. 모든 그림의 페이드 아웃은 동일합니다. 애니메이션은 시간에 따라 다릅니다. 이는 애니메이션 지연으로 제어해야 합니다. 이번에는 animation-iteration-count: Infinite를 사용해야 합니다. 전체 애니메이션은 픽처 스테이(Picture Stay)와 페이드 인(Fade In) 및 아웃(Fade Out)이라는 두 가지 효과로 나누어지며, 화살표는 페이드 인 및 페이드 아웃 과정을 나타냅니다.

CSS3에는 두 애니메이션 사이의 시간 간격을 지정하는 속성이 없으므로 애니메이션에서 다른 그림이 페이드 인 및 아웃될 때 그림의 효과를 작성해야 합니다. . 물론 이때는 애니메이션 작성의 편의를 위해 불투명도:0입니다. 페이드 인 및 페이드 아웃에는 1초가 소요되며 이는 15%와 5%입니다.

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

다음 단계는 애니메이션 지연을 추가하는 것입니다. 각 사진은 첫 번째 사진이 앞에 표시되어야 하므로 다른 사진도 앞에 표시되어야 합니다. 이웃 선택기는 불투명도:0을 사용하므로 첫 번째 사진은 페이드 인 및 아웃될 필요가 없습니다. 중지는 5%이므로 애니메이션 지연은 -1초입니다. 두 번째 장 그림은 첫 번째 그림과 20% 차이가 나므로 4초이고 애니메이션 지연은 3초입니다.

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

이때 캐러셀 이미지를 이동할 수 있습니다

네 , 캐러셀 포커스 추가

캐러셀 포커스를 추가하는 것은 물론 클릭을 위한 것이 아니라 방문자에게 사진 수와 사진의 현재 위치를 알려주는 것입니다. 적어도 개인적으로는 회전식 초점 초점이 매우 중요합니다. 회전식 메뉴에 사진이 몇 장 있는지 모르기 때문입니다. 클릭할 수 없으면 매우 불안하고 전체 페이지를 보지 못했다는 느낌이 들 것입니다. 이제 캐러셀 포커스를 추가해 보겠습니다. 우선 위의 애니메이션을 계속 사용할 수 있다는 점은 매우 분명합니다. 또한 레이아웃에서는 position:absolute를 사용해야 합니다. 또한 현재 그림의 스타일에 대해 한 번, 두 번 초점을 작성해야 한다는 점도 분명합니다. , 그리고 최근 사진 스타일은 한번

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!