CSS를 사용하여 사진 회전문의 동적 효과를 얻는 방법을 살펴보십시오.

CSS를 사용하여 그림 회전 랜턴의 동적 효과를 구현하는 방법은 무엇입니까? 다음 기사에서는 CSS3 애니메이션 변환을 사용하여 회전하는 이미지 효과를 얻는 방법을 소개합니다. 이것이 도움이 되기를 바랍니다.

프로젝트는 사진의 회전문 효과를 구현해야 하기 때문입니다. 일반적인 Vue 컴포넌트 라이브러리를 대부분 확인한 후 이러한 컴포넌트를 거의 볼 수 없었기 때문에 CSS3 애니메이션을 기반으로 회전문 효과를 수동으로 구현했습니다. 즉시 두 가지 솔루션이 떠오릅니다. 하나는 타이머를 사용하거나, scrollLeft하거나 해당 위치의 왼쪽 속성 값을 수정하는 것이고, 다른 하나는 CSS3의 변환 및 애니메이션을 사용하는 것입니다.

애니메이션을 사용하여 구현하기로 선택했습니다. js로 구현한 애니메이션은 CPU에서 실행되고, css3의 애니메이션은 GPU에서 실행되므로 css3의 렌더링 비용이 저렴합니다. 결국 이를 구현하기 위해 css3을 사용하기로 결정했습니다. 작업 유형.

ScrollLeft 사용

처음에는 효과를 얻기 위해 scrollLeft+overflow를 사용하고 이를 트리거하기 위해 타이머를 사용하므로 매번 다시 그리기 및 리플로우가 발생합니다. (ps: 성능을 더 향상시켜야 하는 경우 타이머 트리거 대신 requestAnimationFrame을 사용할 수 있습니다. 가장 큰 장점은 requestAnimationFrame이 각 프레임의 모든 DOM 작업에 집중하여 한 번의 다시 그리기 또는 리플로우로 완료하고 다시 그리기 또는 리플로우 시간 간격이 있다는 것입니다. 일반적으로 이 빈도는 초당 60프레임입니다.)

(scrollLeft를 변경하면 왼쪽과 동일한 효과가 있음) 핵심 코드:

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离，则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束，从新开始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

---

css3 변환 애니메이션 사용

CSS3 애니메이션 사용 회전 랜턴을 구현하려면 CSS 변수를 사용하여 각 상태 변환의 TranslateX 오프셋과 가장 중요한 애니메이션을 동적으로 설정하여 다음과 같이 생성된 gif 효과 중 일부를 달성합니다.

1. html 레이아웃을 미리 설정하고 div 컨테이너를 설정합니다

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"     style="max-width:90%" height="90px" : / alt="CSS를 사용하여 사진 회전문의 동적 효과를 얻는 방법을 살펴보십시오." >
        </li>
    </ul>
</div>

2. 해당 스타일을 설정합니다

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

3. 마지막으로 바인딩 개체를 다음과 같은 스타일로 설정합니다. .box 요소 주요 방법은 CSS 변수를 사용한 다음 특정 값을 통해 애니메이션의 각 상태 효과를 동적으로 설정하는 것입니다. 키 코드는 애니메이션을 사용합니다. cap.length*8+ 의 무한 선형 이동은 무한 반복 이동 효과를 생성합니다.

ps: 전체적인 주요 동작 포인트이며, 기타 세부 사항은 생략

<div class="box" :style="{
&#39;--card-ul-width-start&#39;:-30+&#39;px&#39;,
&#39;--card-ul-width-middle1&#39;:-cap.length*30+&#39;px&#39;, 
&#39;--card-ul-width-middle2&#39;:-cap.length*60+&#39;px&#39;,
&#39;--card-ul-width-end&#39;:-cap.length*90+&#39;px&#39;
}">
    <ul :style="{&#39;-webkit-animation&#39;:cap.length*8+ &#39;s move infinite linear;&#39;}">
        <li></li>
    </ul>
</div>

data(){
    cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')
}

@keyframes move {
    0%{
    transform:translateX(var(--card-ul-width-start))
    }
    30%{
    transform:translateX(var(--card-ul-width-middle1))
    }
    70%{
    transform:translateX(var(--card-ul-width-middle2))
    }
    100%{
    transform:translateX(var(--card-ul-width-end))
    }    
}

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS를 사용하여 사진 회전문의 동적 효과를 얻는 방법을 살펴보십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!