CSS를 사용하여 그라데이션 애니메이션 테두리 효과를 얻는 방법(코드 첨부)

이 기사의 내용은 CSS를 사용하여 그라데이션 애니메이션 테두리 효과를 얻는 방법(코드 포함)에 대한 내용입니다. 필요한 친구가 참고할 수 있기를 바랍니다. 당신에게 도움이 되었습니다.

효과 미리보기

소스코드 다운로드

https://github .com/comehope/front-end-daily-challenges/tree/master/016-colorful-gradient-animated-border

코드 해석

돔 정의, 컨테이너 일부 텍스트 포함:

<div>
    you are my<br>
    FAVORITE
</div>

가운데 표시:

html,
body,
.box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

페이지 배경 색상 설정:

body {
    background: #222;
}

컨테이너 및 텍스트 스타일 설정:

.box {
    color: white;
    font-size: 2.5em;
    width: 10em;
    height: 5em;
    background: #111;
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em;
}

의사 요소를 사용하여 후면 패널 추가:

.box {
    position: relative;
}

.box::after {
    content: '';
    position: absolute;
    width: 102%;
    height: 104%;
    background-color: orange;
    z-index: -1;
    border-radius: 0.2em;
}

후면 패널을 그라데이션 색상으로 설정:

.box::after {
    /*background-color: orange;*/
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
}

후면 패널에 애니메이션 효과 설정: #🎜 🎜#

.box::after {
    background-size: 300%, 300%;
    animation: animate_bg 5s ease infinite alternate;
}

@keyframes animate_bg {
    0% {
        background-position: 0%, 50%;
    }

    50% {
        background-position: 100%, 50%;
    }

    100% {
        background-position: 0%, 50%;
    }
}

마지막으로 텍스트에 색상 변경 효과를 추가합니다.

.box {
    animation: animate_text 2s linear infinite alternate;
}

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}

끝났습니다!

관련 권장 사항:

CSS를 사용하여 오리 머리를 구현하는 방법(코드 포함)

#🎜 🎜 #CSS와 색상 혼합 모드를 사용하여 로더 애니메이션 효과를 얻는 방법(코드 포함)

위 내용은 CSS를 사용하여 그라데이션 애니메이션 테두리 효과를 얻는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!