CSS를 사용하여 회전판 효과를 작성하는 방법은 무엇입니까?

많은 친구들이 자신이 진행한 프로젝트에서 회전판 사진이 필요하다고 생각합니다. 일부 친구는 자신의 바퀴를 만들 수도 있고, 일부는 Google 회전식 차트 플러그인을 직접 사용할 수도 있습니다

그러나 그렇지 않은 경우 사용해 보세요 JavaScript가 캐러셀 이미지 효과를 얻을 수 있나요? 친구들은 이 문제를 고려하지 않았을지도 모르니 CSS를 사용하여 간단한 캐러셀 차트를 구현해 봅시다

기본적인 수요 분석

css는 js와 같은 정밀한 제어를 달성할 수 없기 때문에 모든 특정 효과를 지원하는 등의 달성이 불가능합니다. 사용자는 캐러셀링 중에 왼쪽과 오른쪽으로 슬라이드할 수 있으므로 CSS 인텔리전스를 사용하여 기본적인 효과를 얻을 수 있습니다. 아래 나열된 콘텐츠는 우리가 구현한 것입니다.

1. 고정된 영역에서 내부 콘텐츠가 스스로 슬라이드 및 전환되어 재생 효과를 형성합니다.

2. 콘텐츠의 마지막 부분으로 전환할 때 역방향으로 재생됩니다. 또는 시작 지점으로 돌아가 재생

3. 각 콘텐츠는 사용자가 명확하게 볼 수 있도록 일정 기간 동안 유지됩니다.

4 콘텐츠를 클릭/조작할 수 있습니다

dom 구조 구축

먼저 캐러셀 이미지의 컨테이너인 컨테이너가 있어야 합니다. 왜냐하면 슬라이딩 전환을 위해서는 전환할 모든 콘텐츠를 포함하는 하위 컨테이너가 내부에 있어야 하기 때문입니다

콘텐츠가 하위 컨테이너가 왼쪽과 오른쪽으로 바뀌면 콘텐츠를 왼쪽과 오른쪽으로 정렬해야 합니다

다음은 캐러셀 이미지를 예로 든 것입니다. 위 코드

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
        <img src="whiteland.jpg" alt="" class="loop-image">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap는 기본 컨테이너 .loop-wrap 是主容器

.loop-images-container 是承载内部图片的子容器

.loop-image 是图片内容，如果需要显示其他内容，可以自定义

css实现静态效果

轮播图内每一页内容的宽高应该相同，且等于主容器.loop-wrap宽高

.loop-images-container的宽高必然有一个大于外部主容器，overflow属性应该设置为hidden。那为什么不设置为auto呢？我不告诉你，你可以自己试试看???

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-image{
    width: 500px;
    height: 300px;
}

下面在浏览器中打开页面，就可以看到不带轮播效果的静态页面了，除了第一张图片，其他图片都不可见

css实现轮播效果

轮播效果说到底就是一个动画效果，而通过css3的新属性 animation 我们就可以自定义一个动画来达到轮播图效果。下面先来了解一下 animation 这个属性

/*
animation: name duration timing-function delay iteration-count direction
name: 动画名
duration： 动画持续时间 设置为0则不执行
timing-function：动画速度曲线
delay：动画延迟开始时间 设置为0则不延迟
iteration-count：动画循环次数 设置为infinite则无限次循环
direction：是否应该轮流反向播放动画 normal 否 alternate 是
*/

animation 的 name 值是动画名，动画名可以通过 @keyframes 创建自定义动画规则

分析动画

要实现轮播，本质上是使内部承载内容的子容器 .loop-images-container 进行位移，从而使不同位置的内容一次展示在用户眼前

共有五张图片需要展示，如果轮播总耗时10s，那么每张图片应该有2s的时间(20%)，而每张图片耗时的构成是切换耗时+展示耗时，如果切换耗时500ms(5%)，展示耗时就应该是1500ms(15%)

于是这样改造css

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}
/* 创建loop动画规则 */
/* 
   轮播5张，总耗时10s，单张应为2s(20%)
   单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */
    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}
    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}
    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}
    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}
    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}

当当当当~~~纯css实现轮播图效果完成

想要直接看效果的小伙伴可以猛戳下面的链接

纯css实现轮播图效果

这是一个方向的轮播效果，想要实现往返方向的轮播效果，小伙伴们可以试试direction的alternate

.loop-images-container 는 내부 이미지를 전달하는 하위 컨테이너입니다.

.loop-image code>는 이미지 콘텐츠입니다. 다른 콘텐츠를 표시하려면

css를 사용자 정의하여 정적 효과를 얻을 수 있습니다. 🎜🎜🎜캐러셀에 있는 각 콘텐츠 페이지의 너비와 높이는 기본 컨테이너 .loop-wrap 과 동일해야 합니다. code>너비 및 높이🎜🎜<code>.loop-images-container는 외부 기본 컨테이너보다 너비와 높이가 커야 하며, overflow 속성은 로 설정되어야 합니다. >숨겨진 코드>. 그렇다면 auto로 설정해 보는 것은 어떨까요? 말씀은 안 드리고 직접 해보셔도 됩니다???🎜rrreee🎜아래 브라우저에서 페이지를 열면 캐러셀 효과가 없는 정적 페이지가 나옵니다. 첫 번째 사진을 제외하면 다른 사진은 보이지 않습니다🎜 🎜 🎜CSS는 회전판 효과를 구현합니다🎜🎜🎜최종 분석에서 회전판 효과는 애니메이션 효과이며 CSS3 animation의 새로운 속성을 통해 애니메이션을 사용자 정의하여 회전판 효과를 얻을 수 있습니다. 먼저 animation 속성을 ​​살펴보겠습니다. 🎜rrreee🎜animation의 name 값은 애니메이션 이름을 전달할 수 있습니다. code>@keyframes 사용자 정의 애니메이션 규칙 만들기 🎜🎜🎜애니메이션 분석 🎜🎜🎜 캐러셀을 구현하려면 본질적으로 내부 콘텐츠를 보유하는 하위 컨테이너 .loop-images-container 가 대체됩니다. 그로 인해 위치의 내용이 한 번에 사용자 앞에 표시됩니다🎜🎜표시할 사진은 총 5개입니다. 캐러셀에 총 10초가 걸린다면 각 사진에는 2초(20%)가 있어야 하며, 각 사진의 소모 시간은 시간 + 표시 시간으로 구성되는데, 전환이 500ms(5%) 걸린다면 표시 시간은 1500ms(15%)가 되어야 합니다🎜🎜그래서 CSS는 이렇게 변형되었습니다🎜rrreee🎜당당당 ~~순수한 CSS로 완성되는 캐러셀 효과🎜 🎜효과를 직접 보고 싶은 친구들은 아래 링크를 클릭하세요🎜🎜순수한 CSS로 캐러셀 효과를 얻을 수 있습니다🎜🎜원하는 경우에는 한 방향의 캐러셀 효과입니다. 왕복 캐러셀 효과를 얻으려면 방향을 대체해 보세요. 하지만 맞춤 애니메이션 규칙의 시간 간격도 다시 계산해야 합니다! 🎜🎜추천 튜토리얼: "🎜CSS 튜토리얼🎜"🎜🎜

위 내용은 CSS를 사용하여 회전판 효과를 작성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!