로더 애니메이션 효과를 얻기 위해 CSS와 색상 혼합 모드를 사용하는 방법(코드 첨부)

이 문서의 내용은 CSS 및 색상 혼합 모드를 사용하여 로더 애니메이션 효과(코드 포함)를 얻는 방법에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

효과 미리보기

소스 코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

dom 정의, 1개 요소만 정의:

<div></div>

중심 표시:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

컨테이너 크기 정의:

.loader {
    width: 30em;
    height: 3em;
    font-size: 10px;
}

의사 요소를 사용하여 각각 컨테이너 너비의 절반을 차지하는 두 개의 둥근 직사각형을 그리고 컨테이너의 왼쪽과 오른쪽 끝에 배치한 다음 각각 색상을 지정합니다.

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 50%;
    height: inherit;
    border-radius: 1em;
}

.loader::before {
    left: 0;
    background-color: dodgerblue;
}

.loader::after {
    right: 0;
    background-color: hotpink;
}

둥근 직사각형입니다. '로딩' 텍스트 추가:

.loader::before,
.loader::after {
    content: 'loading';
    font-size: 2.5em;
    color: white;
    text-align: center;
    line-height: 1em;
}

애니메이션 효과 추가:

.loader::before,
.loader::after {
    animation: 5s move ease-in-out infinite;
}

@keyframes move {
    50% {
        transform: translateX(100%);
    }
}

두 개의 둥근 직사각형에 대해 모션 방향 변수를 설정하여 서로 상대적으로 움직입니다.

.loader::before {
    --direction: 1;
}

.loader::after {
    --direction: -1;
}

@keyframes move {
    50% {
        transform: translateX(calc(100% * var(--direction)));
    }
}

마지막으로 블렌딩 모드를 설정하여 두 직사각형의 교차점은 오버레이가 아니므로 색상이 겹칩니다.

.loader::before,
.loader::after {
    mix-blend-mode: multiply;
}

완료되었습니다!

관련 추천:

CSS를 사용하여 모자를 쓴 자이언트 팬더를 구현하는 방법(코드 포함)

순수한 CSS를 사용하여 버튼 전환 시 배경의 호버 애니메이션 효과를 구현하는 방법

위 내용은 로더 애니메이션 효과를 얻기 위해 CSS와 색상 혼합 모드를 사용하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!