CSS3에서 사전 로드 애니메이션 효과를 얻는 몇 가지 방법
- 不言원래의
- 2018-06-20 11:29:382341검색
이 글은 주로 CSS3 애니메이션을 소개합니다: 프리로드 애니메이션 효과의 5가지 예시 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.
그림과 같은 애니메이션 효과 달성:
애니메이션 1 미리 로드: 이중 회전 원
두 개의 서로 다른 방향으로 회전하는 원. 내부 링의 속도에 대한 CSS 코드를 정의합니다. 즉, 내부 링의 속도는 외부 링의 속도보다 2배 빠릅니다.
구현은 그림에 표시됩니다.
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: 인터레이스 원
원 두 개 측면을 앞뒤로 엇갈리게 움직입니다. 각 원에는 고유한 역방향 이동 애니메이션 매개변수 세트가 있습니다.
효과:
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: 회전 원
효과:
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: 점핑 원
이것은 멕시코 물결 패턴 애니메이션 효과입니다. 서로 다른 원 사이의 거리를 설정합니다. 지연 매개변수 성취하다.
효과:
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: 레이더 서클
설정을 제공하는 레이더 방사 효과 3개의 스팬 요소에 대해 동일한 페이드인 및 페이드아웃 효과를 적용한 다음 이를 달성하기 위해 각 요소를 약간 지연시킵니다.
효과:
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;}
}
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. , 관련 내용 더보기 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
CSS를 사용하여 브라우저 확대/축소에 따라 배경 이미지 크기가 변경되지 않는 코드를 구현하는 두 가지 방법
위 내용은 CSS3에서 사전 로드 애니메이션 효과를 얻는 몇 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.