CSS로 캐러셀 효과를 얻는 방법

CSS에서는 "@keyframes" 규칙과 "animation" 속성을 사용하여 애니메이션을 정의하여 캐러셀 전환 효과를 얻을 수 있습니다. 애니메이션은 요소를 한 스타일에서 다른 스타일로 점진적으로 변경하는 효과입니다. 복잡한 애니메이션 효과를 얻기 위해 종종 사용되는 여러 노드를 설정하여 하나 또는 애니메이션 그룹을 정밀하게 제어할 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 애니메이션 효과의 위력은 자명합니다. 등장 이후 그 인기는 줄어들지 않았습니다. JS 애니메이션과 비교했을 때의 장점과 단점 역시 프론트엔드 업계에서 논쟁의 여지가 있었습니다. CSS3 애니메이션은 CSS3 애니메이션의 영향을 어느 정도 줄였습니다. 애니메이션 효과를 구현하는 어려움은 프런트 엔드 학습에 도움이 됩니다. 간소화된 코드 크기로 인해 귀찮은 js 디버깅이 가능해집니다. CSS3를 사용하여 모든 애니메이션을 시뮬레이션할 수는 없습니다. 또한 이는 브라우저 호환성 문제입니다. 이번에는 CSS3를 사용하여 캐러셀 효과를 구현하고 CSS3의 강력함을 경험해 보겠습니다.

우선 자동 캐러셀만 구현했으며 효과는 가장 일반적인 페이드 인 및 페이드 아웃입니다. 적어도 현재 레벨에서는 자동 캐러셀과 클릭 회전만 가능합니다. 순수 CSS3을 사용하여 선택했습니다. 우선, 두 가지 효과를 동시에 얻을 수 있는 방법이 있다면 알려주시기 바랍니다.

1. 레이아웃

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

html 코드는 말할 것도 없고 우선 슬라이더의 큰 상자가 상대적으로 위치해야 합니다. li 태그에 이미지를 넣는 것이 가능하기 때문에 순수 CSS를 사용하여 반응성을 구현해야 합니다. 또한 응답성에서 전체 그림을 명확하게 보려면 배경 이미지에 background-size:100%를 사용해야 합니다. 또 다른 문제는 높이입니다. 분명히 슬라이더 컨테이너는 높이를 고정할 수 없기 때문에 li의 높이와 일치해야 합니다. 따라서 높이 속성을 사용하면 분명히 이 문제를 해결할 수 있습니다. 둘째, 패딩의 % 단위는 상위 요소의 너비를 기준으로 합니다.

*{
      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. 애니메이션 디자인하기

페이드인과 페이드아웃 효과는 반드시 불투명도를 사용해야 합니다. 우선 모든 그림의 페이드인과 페이드아웃은 동일한 애니메이션이지만 시간이 다릅니다. 애니메이션의 무한 회전을 위해서는 animation-delay를 사용해야 합니다. 이번에는 전체 애니메이션이 Picture Stay와 Fade-in의 두 가지 효과로 나누어집니다. 페이드 아웃 다음 그림은 페이드 인 및 페이드 아웃 과정을 나타내는 데 사용됩니다.

CSS3에는 두 애니메이션 사이의 시간 간격을 지정하는 속성이 없기 때문에 애니메이션에서 다른 이미지가 페이드 인 및 아웃될 때 이미지의 효과를 작성해야 합니다. 이때는 분명히 불투명도: 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을 통해 첫 번째 이미지는 페이드 인 및 아웃할 필요가 없습니다. 바로 점프하여 머무르는 것은 5%이므로 애니메이션 지연은 -1초이고 두 번째 챕터 그림은 첫 번째 이미지와 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;
}

이때 우리 캐러셀은 사진이 움직일 수 있습니다

3. 캐러셀 포커스 추가

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

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

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

[추천 튜토리얼: CSS 비디오 튜토리얼]

4. 코드 결합하기

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

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

위 내용은 CSS로 캐러셀 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!