HTML과 CSS를 사용하여 무한 스크롤 선택 윤곽 만들기

웹사이트에 애니메이션을 추가하면 웹사이트를 더욱 인터랙티브하고 멋지게 만들 수 있습니다. 이를 달성하는 가장 좋은 방법 중 하나는 기술이나 도구와 같은 부드러운 콘텐츠 위로 미끄러져 웹사이트를 돋보이게 하는 매우 매끄러운 애니메이션인 스크롤링 윤곽을 만드는 것입니다.

이 튜토리얼에서는 HTML과 CSS만 사용하여 무한 스크롤 선택 윤곽을 만드는 방법을 보여 드리겠습니다.

마키란 무엇입니까?

스크롤링 선택 윤곽은 콘텐츠가 화면에서 끝없이 이동하는 간단한 애니메이션입니다. 이는 기술, 기술 및 기능과 같은 텍스트를 보여주기 위해 사용될 수 있습니다.

코딩해보자

HTML 구조

먼저 html 구조를 생성하세요

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

  @keyframes animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

작동 방식

부드러운 애니메이션:

@keyframes 규칙은 부드러운 스크롤 효과를 지정하며 애니메이션 속성은 이를

에 적용합니다.

끊김없는 반복:

두 개의 동일한

섹션이 중간에 한 블록을 시작하여 끝없는 스크롤의 환상을 만듭니다.

호버 효과:

항목 위에 마우스를 올리면 배경이 밝은 분홍색(#f52789)으로 변경됩니다.

당신의 선택 윤곽을 사용자 정의

항목 변경: 태그를 업데이트하여 서비스, 도구, 사용후기 등 ​​자신만의 콘텐츠를 표시하세요.

속도 조정: --t CSS 변수를 사용하여 애니메이션 지속 시간을 제어합니다. 값이 작을수록 속도가 빨라집니다.

색상 변경: 웹사이트 테마에 맞게 배경과 텍스트 색상을 맞춤설정하세요.

결론

스크롤링 윤곽은 웹사이트를 매력적으로 만드는 간단하면서도 강력한 기능 중 하나입니다. 이 튜토리얼에서는 콘텐츠 및 디자인 기본 설정에 맞는 스크롤 선택 윤곽을 쉽게 만드는 방법을 알려드립니다. 이것을 시도해 보세요.

위 내용은 HTML과 CSS를 사용하여 무한 스크롤 선택 윤곽 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!