CSS3 전환 및 변형으로 선택 윤곽 효과 달성

이 글은 간단한 마키 효과를 얻기 위해 CSS3 전환 변환을 사용하는 예제에 대한 관련 정보를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

이전 고객의 요구 사항은 gif를 사용하여 marquee를 구현하는 것이었지만, 사진의 텍스트를 다양한 언어로 번역해야 하기 때문에 gif를 사용할 수 없습니다. .그래서 직접 써보세요. html

<p lantern>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</p>

css

* {
  margin: 0;
  padding: 0;
}

[lantern] {
  overflow: hidden;
}

ul {
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  transition: transform 0s linear;
}

li {
  width: 50vw;
  border: 1px solid red;
  display: inline-block;
  height: 30px;
  font-size: 16px;
}

js

function lantern($element,speed = 10) {
    let liWidth = 0;
    let $ul = $element.find("ul");

    function run(init = false) {
      let $li = $ul.find("li").first();
      liWidth = $li.outerWidth();

      if(!init){
        $ul.append($li[0].outerHTML);
        $li.remove();
      }
      
      $ul[0].style.transitionDuration = "0s";
      $ul[0].style.transform = "translateX(0)";

      setTimeout(function() {
        $ul[0].style.transitionDuration = speed + "s";
        $ul[0].style.transform = "translateX(-" + liWidth + "px)";
      }, 20);
    }

    run(true);
    setTimeout(() => {
      setInterval(run, speed * 1000);
    }, 0);
  }
 
lantern($('[lantern]'), 20);

관련 권장사항:

텍스트 선택 윤곽 효과 구현

WPF는 good 움직이는 특수효과 예시를 시청하세요

미니 프로그램에서는 티몰 복권의 대형 턴테이블과 천막과 유사한 효과를 얻을 수 있습니다

위 내용은 CSS3 전환 및 변형으로 선택 윤곽 효과 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!