CSS3 애니메이션은 5가지 사전 로드 애니메이션 효과를 구현합니다.-CSS 튜토리얼-php.cn

애니메이션 미리 로드 1: 이중 회전 원

애니메이션 2 사전 로드: 엇갈린 원

애니메이션 3 사전 로드: 회전 원

사전 로드 애니메이션 4: 점핑 서클

프리로드 애니메이션 5: 레이더 서클

집

웹 프론트엔드

CSS 튜토리얼

CSS3 애니메이션은 5가지 사전 로드 애니메이션 효과를 구현합니다.

高洛峰

Mar 22, 2017 pm 02:51 PM

CSS3 애니메이션

그림과 같은 애니메이션 효과 달성:
CSS3动画实现5种预载动画效果

애니메이션 미리 로드 1: 이중 회전 원

서로 다른 두 방향으로 회전하는 원. 내부 링의 속도에 대한 CSS 코드를 정의합니다. 즉, 내부 링의 속도는 외부 링의 속도보다 2배 빠릅니다.
구현은 그림과 같습니다:
CSS3动画实现5种预载动画效果
html 코드:

<body style="background: #ffb83c;">
    <p id="preloader-1">
        <span></span>
        <span></span>
    </p>
</body>

로그인 후 복사

css 코드:

#preloader-1{
    position: relative;
}
#preloader-1 span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}
}

로그인 후 복사

애니메이션 2 사전 로드: 엇갈린 원

두 개의 원이 옆으로 앞뒤로 움직입니다. 각 원에는 고유한 역방향 이동 애니메이션 매개변수 세트가 있습니다.
효과:
CSS3动画实现5种预载动画效果
html 코드:

<body style="background: #4ad3b4;">
    <p id="preloader-2">
        <span></span>
        <span></span>
    </p>
</body>

로그인 후 복사

css 코드:

#preloader-2{
    position: relative;
}
#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

로그인 후 복사

애니메이션 3 사전 로드: 회전 원

효과:
CSS3动画实现5种预载动画效果
html 코드:

<body style="background: #ab69d9;">
    <p id="preloader-3">
        <span></span>
    </p>
</body>

로그인 후 복사

css 코드:

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}
#preloader-3 span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:-4px;
    left:-4px;
    animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

로그인 후 복사

사전 로드 애니메이션 4: 점핑 서클

이것은 멕시코 물결 패턴 애니메이션입니다. 효과가 달성됩니다. 서로 다른 원 사이의 지연 매개변수를 설정하여
효과:
CSS3动画实现5种预载动画效果
html 코드:

<body style="background: #c1d64a;">
    <p id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

로그인 후 복사

css 코드:

#preloader-4{
    position: relative;
}
#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

로그인 후 복사

프리로드 애니메이션 5: 레이더 서클

레이더의 일종 방사 효과의 경우 span elements 3개에 대해 동일한 페이드 인 및 페이드 아웃 효과를 설정한 다음 각 효과를 약간 지연시켜 달성합니다.
효과:
CSS3动画实现5种预载动画效果
html 코드:

<body style="background: #f9553f;">
    <p id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

로그인 후 복사

css 코드:

#preloader-5{
    position: relative;
}
#preloader-5 span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
    animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
    animation-delay: 1.33s;
}

@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}
}

로그인 후 복사