순수 CSS를 사용하여 간단한 로딩 애니메이션 효과 얻기(코드 예)-CSS 튜토리얼-php.cn

이 문서에서는 코드 예제를 사용하여 순수 CSS를 사용하여 간단한 로딩 애니메이션 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

순수 CSS를 사용하여 간단한 로딩 애니메이션 효과 얻기(코드 예)

【추천 튜토리얼:CSS 동영상 튜토리얼】

현재 많은 웹사이트에서 로딩 효과를 위해 gif 이미지를 사용하고 있는 것을 보고 CSS만 사용하여 어떻게 구현할 수 있는지 궁금했습니다. 좋은 물건이 오고 있으니 꼭 받아가세요.

난이도

☆☆☆☆

Rendering

순수 CSS를 사용하여 간단한 로딩 애니메이션 효과 얻기(코드 예)

Ideas

CSS는 HTML을 수정하는 데 사용되므로 가장 간단한 효과도 HTML에 따라 구현됩니다. HTML 레이아웃이 최우선입니다.

먼저 애니메이션 효과의 구성을 분석해 보겠습니다.

Lines
- 로드가 계속되면 여러 선이 원을 형성합니다
- 이 선은 길이는 같지만 방향이 다릅니다
- 각 선은 그렇지 않습니다. 전체 직경을 관통하지만 단위는 반경
Circle
- 전체적인 효과는 링, 안쪽 원의 배경색은 전체 배경과 동일
Animation
- 특정에서 시작 선, 각 반경 선의 색상(투명도)은 하나씩 변경됩니다.

요약하자면 다음 단계를 사용하여 로딩 효과의 미스터리를 단계별로 풀어냅니다.

(1) HTML을 사용하여 특정 지점을 따라 배치된 동일한 선을 구현하면 원이 형성됩니다

( 2) 작은 원을 그리고 배경색을 추가한 후 선의 중앙까지 덮습니다

(3) 그라데이션 애니메이션을 추가하여 변경 선의 투명도

(4) 선마다 다른 애니메이션 지연을 설정하여 선을 움직이게 합니다.

HTML

로그인 후 복사

분석:

load-line은 회전 방향이 동일하므로 반경 선을 나타냅니다.
각 반경 선의 애니메이션 지연이 다르기 때문에 왼쪽과 오른쪽 두 선을 추가하세요.
circle-center는 내부 원을 나타냅니다.

CSS

#container, #circle-center { background: grey; } #container { position: relative; width: 600px; height: 300px; } #circle-center { position: absolute; top: 100px; left: 250px; width: 100px; height: 100px; border-radius: 100px; } .load-line { position: absolute; top: 150px; left: 200px; width: 200px; height: 13px; } .load-line > span { display: inline-block; width: 50%; height: 100%; border-radius: 20px; background: white; } .left { float: left; } .right { float: right; } .rotate-0 { transform: rotate(0); } .rotate-0 > .left { animation: load-effect 1.2s linear 0s infinite; } .rotate-0 > .right { animation: load-effect 1.2s linear 0.6s infinite; } .rotate-30 { transform: rotate(30deg); } .rotate-30 > .left { animation: load-effect 1.2s linear 0.1s infinite; } .rotate-30 > .right { animation: load-effect 1.2s linear 0.7s infinite; } .rotate-60 { transform: rotate(60deg); } .rotate-60 > .left { animation: load-effect 1.2s linear 0.2s infinite; } .rotate-60 > .right { animation: load-effect 1.2s linear 0.8s infinite; } .rotate-90 { transform: rotate(90deg); } .rotate-90 > .left { animation: load-effect 1.2s linear 0.3s infinite; } .rotate-90 > .right { animation: load-effect 1.2s linear 0.9s infinite; } .rotate-120 { transform: rotate(120deg); } .rotate-120 > .left { animation: load-effect 1.2s linear 0.4s infinite; } .rotate-120 > .right { animation: load-effect 1.2s linear 1.0s infinite; } .rotate-150 { transform: rotate(150deg); } .rotate-150 > .left { animation: load-effect 1.2s linear 0.5s infinite; } .rotate-150 > .right { animation: load-effect 1.2s linear 1.1s infinite; } @keyframes load-effect { 0% { opacity: 0; } 100% { opacity: 1; } }

로그인 후 복사

분석:

전체 효과의 상위 컨테이너는 하위 요소의 레이아웃을 용이하게 하기 위해 비정적 위치 지정을 설정해야 합니다. 이 예는 상대적입니다
모든 선은 크기가 같고 모서리가 둥글습니다.
동일한 지름 방향을 따르는 선은 동일한 회전 각도를 가집니다.
모든 선은 동일한 애니메이션 효과를 가집니다(투명도가 변경됨). 애니메이션 지속 시간은 동일하며 애니메이션 지연은 특정 라인부터 하나씩 시작됩니다.

더 많은 프로그래밍 관련 지식을 보려면프로그래밍 비디오를 방문하세요! !

위 내용은 순수 CSS를 사용하여 간단한 로딩 애니메이션 효과 얻기(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!