SVG 및 CSS3를 사용하여 멋진 테두리 애니메이션 구현-CSS 튜토리얼-php.cn

이 글에서는 주로 SVG와 CSS3를 사용하여 멋진 테두리 애니메이션을 만드는 방법을 소개합니다. JavaScript를 사용하지 않으면 작성 과정이 훨씬 쉬워집니다. 도움이 필요한 친구들이 참고할 수 있습니다.

오늘은 Carl Philipe Brenner의 웹사이트를 살펴보겠습니다. 애니메이션 효과. 마우스가 그리드 요소 위로 지나갈 때 미묘한 애니메이션이 발생합니다. 그리드 요소가 투명해지고 각 가장자리에 시계 방향 애니메이션이 포함되어 매우 멋진 효과를 만들어냅니다. 이 효과는 JS를 통해 스팬 태그의 너비 또는 높이에 애니메이션을 적용하는 것입니다. 나중에 SVG 및 CSS 그래디언트를 사용하여 이 작업을 수행할 것입니다. 이 기술은 아직 실험적이라는 점에 유의하세요.

먼저 기본 개념을 살펴보고 그에 맞춰 작업하겠습니다.

SVG에서는 CSS 전환을 사용할 예정이며 일부 브라우저에서는 지원되지 않을 수 있습니다.

언뜻 보면 이 효과가 어떻게 달성되는지 이해하지 못할 수도 있습니다. 위쪽 가장자리를 자세히 살펴보면 흰색 가장자리의 너비가 오른쪽에서 왼쪽으로 계속 확장되고 약간 지연된 가장자리가 함께 이동하는 것을 확인할 수 있습니다. 이것은 모든면에서 이루어집니다. 위쪽 가장자리가 모서리를 지나 왼쪽으로 이동한 것처럼 보입니다.

SVG를 사용하지 않거나 의사 요소만 사용해도 이 효과를 얻을 수 있습니다. 하지만 우리는 JavaScript 대신 CSS를 사용하여 SVG를 제어하는 방법을 탐구하고 싶었습니다.

이제 어떻게 이런 효과를 낼 수 있을지 생각해 봅시다. 직사각형의 획-대시 오프셋을 변경하거나 선을 직접 그릴 수 있습니다. JavaScript 없이 해결 방법을 시도해 보겠습니다. 우리는 CSS 전환 스트로크-대시오프셋 및 스트로크-대시해레이의 값이 많은 버그를 유발할 수 있다는 것을 발견했습니다. 그래서 우리는 CSS에서 이해하고 구현하기 쉬운 선과 애니메이션을 사용하여 다른 솔루션을 시도할 것입니다. 이는 또한 다양한 애니메이션 효과를 탐색할 수 있는 더 많은 기회를 제공합니다.

우리가 사용할 선의 특별한 점은 이 애니메이션에서 세 가지 상태를 갖는다는 것입니다. 이는 정사각형 상자 변 길이의 3배이고 중간 부분은 변 길이와 동일한 간격입니다. 스트로크-대시오프셋 값을 상자 측면의 길이와 동일하게 설정하겠습니다. 이제 이 애니메이션을 구현하는 핵심은 선의 위치 변환에 있습니다.
2015722165434429.gif (600×369)

SVG는 사각형 상자와 크기가 동일하므로 점선 너머 부분은 보이지 않습니다.

먼저 첫 번째 줄을 완성해 보겠습니다.

<p>   
    <svg width="200" height="200">   
        <line x1="0" y1="0" x2="600" y2="0" />   
    </svg>   
</p>

로그인 후 복사

이 p의 길이와 너비는 SVG와 동일하게 20px입니다. SVG 위치를 절대값으로, 선 너비를 10으로, 스트로크 대시선을 200으로 설정합니다.

p {   
    width: 200px;   
    height: 200px;   
    position: relative;   
    overflow: hidden;   
    background: #ddd;   
}   
  
svg {   
    position: absolute;   
    top: 0;   
    left: 0;   
}   
  
svg line {   
    stroke-width: 10;   
    stroke: #000;   
    fill: none;   
    stroke-dasharray: 200;   
    -webkit-transition: -webkit-transform .6s ease-out;   
    transition: transform .6s ease-out;   
}   
  
p:hover svg line {   
    -webkit-transform: translateX(-400px);   
    transform: translateX(-400px);   
}

로그인 후 복사

계산 마우스를 p 위로 가져가면 선에도 전환이 발생합니다. 선을 해당 위치의 2/3만큼 이동하여 x축에서 -400px가 되며 효과를 볼 수 있습니다. 여기서는 번역 단위로 백분율을 사용할 수 없으므로 px를 사용합니다.

그런 다음 나머지 세 줄을 추가합니다. gif 효과:
2015722165612818.gif (600×369)

다음 효과를 달성해야 합니다. 선의 첫 번째 부분이 사각형 상자 밖으로 이동한 후 그 옆에 있는 선의 마지막 부분이 안으로 이동합니다. , 직선을 지나 모퉁이를 돌게 됩니다

좌표계의 정의를 살펴보겠습니다:
2015722165651126.png (600×442)

왼쪽 선의 좌표는 (0,200) ~ (0,-400)입니다. , 아래쪽 선의 좌표는 (200,200) ~ (-400,200)이고 오른쪽 선의 좌표는 바로 (200,0) ~ (200,600)입니다.

각 선에 다른 호버 효과 추가 :

p:hover svg line.top {   
  -webkit-transform: translateX(-400px);   
  transform: translateX(-400px);   
}   
  
p:hover svg line.bottombottom {   
  -webkit-transform: translateX(400px);   
  transform: translateX(400px);   
}   
  
p:hover svg line.left {   
  -webkit-transform: translateY(400px);   
  transform: translateY(400px);   
}   
  
p:hover svg line.rightright {   
  -webkit-transform: translateY(-400px);   
  transform: translateY(-400px);   
}

로그인 후 복사

현재 효과를 보세요.

이제 상자 크기를 300 x 460으로 변경하고 여기에 콘텐츠를 추가하세요.

<p class="box">   
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">   
        <line class="top" x1="0" y1="0" x2="900" y2="0"/>   
        <line class="left" x1="0" y1="460" x2="0" y2="-920"/>   
        <line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>   
        <line class="right" x1="300" y1="0" x2="300" y2="1380"/>   
    </svg>   
    <h3>D</h3>   
    <span>2012</span>   
    <span>Broccoli, Asparagus, Curry</span>   
</p>

로그인 후 복사

Carl Philipe Brenner의 웹사이트에서 효과를 얻으려면 색상 전환 효과, 상자 그림자 등도 추가해야 합니다.

.box {   
    width: 300px;   
    height: 460px;   
    position: relative;   
    background: rgba(255,255,255,1);   
    display: inline-block;   
    margin: 0 10px;   
    cursor: pointer;   
    color: #2c3e50;   
    box-shadow: inset 0 0 0 3px #2c3e50;   
    -webkit-transition: background 0.4s 0.5s;   
    transition: background 0.4s 0.5s;   
}   
  
.box:hover {   
    background: rgba(255,255,255,0);   
    -webkit-transition-delay: 0s;   
    transition-delay: 0s;   
}

로그인 후 복사

Give 텍스트에 스타일 추가:

.box h3 {   
    font-family: "Ruthie", cursive;   
    font-size: 180px;   
    line-height: 370px;   
    margin: 0;   
    font-weight: 400;   
    width: 100%;   
}   
  
.box span {   
    display: block;   
    font-weight: 400;   
    text-transform: uppercase;   
    letter-spacing: 1px;   
    font-size: 13px;   
    padding: 5px;   
}   
  
.box h3,   
.box span {   
    -webkit-transition: color 0.4s 0.5s;   
    transition: color 0.4s 0.5s;   
}   
  
.box:hover h3,   
.box:hover span {   
    color: #fff;   
    -webkit-transition-delay: 0s;   
    transition-delay: 0s;   
}

로그인 후 복사

SVG 및 선에 스타일 추가:

.box svg {   
    position: absolute;   
    top: 0;   
    left: 0;   
}   
  
.box svg line {   
    stroke-width: 3;   
    stroke: #ecf0f1;   
    fill: none;   
    -webkit-transition: all .8s ease-in-out;   
    transition: all .8s ease-in-out;   
}

로그인 후 복사

선 전환에 지연 추가:

.box:hover svg line {   
    -webkit-transition-delay: 0.1s;   
    transition-delay: 0.1s;   
}

로그인 후 복사

이전에 정의한 스트로크-다샤레이에는 값이 하나만 있지만 이제는 수정해야 합니다. 크기 변경

.box svg line.top,   
.box svg line.bottombottom {   
    stroke-dasharray: 330 240;    
}   
  
.box svg line.left,   
.box svg line.rightright {   
    stroke-dasharray: 490 400;   
}

로그인 후 복사

이 값을 실험해 보면 선이 어떻게 다르게 나타나는지 확인할 수 있습니다.

마지막으로 호버 전환에 해당하는 값을 설정해야 합니다. 이제 요소의 너비가 300px이므로 가로선이 900px로 변경되고 세로선도 같은 방식으로 변경됩니다.

.box:hover svg line.top {   
    -webkit-transform: translateX(-600px);   
    transform: translateX(-600px);   
}   
  
.box:hover svg line.bottombottom {   
    -webkit-transform: translateX(600px);   
    transform: translateX(600px);   
}   
  
.box:hover svg line.left {   
    -webkit-transform: translateY(920px);   
    transform: translateY(920px);   
}   
  
.box:hover svg line.rightright {   
    -webkit-transform: translateY(-920px);   
    transform: translateY(-920px);   
}

로그인 후 복사

완료되었습니다. 이러한 효과가 여러분의 창의력을 자극하고 더 많은 효과를 얻을 수 있기를 바랍니다~

위 내용은 모두의 학습에 도움이 되기를 바랍니다. !