CSS에서 점선 테두리 스크롤 효과를 얻는 방법

먼저 효과를 살펴보겠습니다.

구현 코드는 다음과 같습니다.

HTML

<div class="box">
  <p>测试测试</p>
</div>

Easy-way

배경 이미지를 통해 구현됩니다.

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}

(동영상 튜토리얼 추천: css 동영상 튜토리얼)

repeating-linear-gradient

135도 반복 선형 그래디언트, p는 높이를 확장하고 흰색 배경은 외부 div 그래디언트를 덮습니다.

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一个BFC，解决margin在垂直方向上折叠的问题
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}

linear-gradient&&ground

선형 그래디언트와 배경 크기를 통해 점선을 그린 후 배경 위치를 통해 네 변으로 이동합니다. 이 방법의 좋은 점은 네 면의 스타일과 애니메이션 방향을 각각 설정할 수 있다는 것입니다. 주의 깊은 학생들은 이전 방법의 애니메이션이 시계 방향이나 시계 반대 방향이 아니라는 것을 알게 될 것입니다.

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

linear-gradient&&mask

마스크 속성 사양이 후보 권장 사양 목록에 포함되어 있으므로 향후 확립된 사양 표준에 들어갈 것이 확실하다고 말씀드리겠습니다. 그리고 그것은 미래에 유용할 것입니다.

여기서 마스크를 사용하여 동일한 애니메이션을 얻을 수도 있으며 점선 테두리 그라데이션 색상의 효과를 얻을 수 있습니다. 배경과의 차이점은 마스크가 중간에 불투명 마스크를 추가해야 한다는 것입니다. 그렇지 않으면 p 요소의 내용이 필요합니다. 다룰 것입니다.

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat;        // 这里不透明颜色随便写哦
  -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}

추천 튜토리얼: css 빠른 시작

위 내용은 CSS에서 점선 테두리 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!