CSS를 사용하여 트럭 로더의 효과를 얻는 방법-CSS 튜토리얼-php.cn

이 기사의 내용은 CSS를 사용하여 트럭 로더의 효과를 얻는 방법에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

CSS를 사용하여 트럭 로더의 효과를 얻는 방법

# # 코드 해석

돔 정의, 컨테이너는 트럭을 나타내고 포함된 2개의 하위 요소는 전면과 배기 장치를 나타냅니다.

로그인 후 복사

# #이 중앙에 표시됩니다. 동시에 도로와 페이지 사이에 공간을 남겨두세요:

body { margin: 10%; padding-top: 10%; }

로그인 후 복사

트럭 칸 그리기:

.truck { width: 15em; height: 5em; font-size: 10px; background-color: #444; border-radius: 0.4em; }

로그인 후 복사

의사 요소를 사용하여 구획의 바퀴 그리기:

.truck { position: relative; } .truck::before, .truck::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; } .truck::before { left: 0.6em; } .truck::after { right: 0.6em; }

로그인 후 복사

# # 자동차의 앞쪽 그리기:

.cab { position: absolute; width: 3.3em; height: 2.5em; background-color: #333; left: -3.5em; bottom: 0; border-radius: 40% 0 0.4em 0.4em; } .cab::before { content: ''; position: absolute; width: 2em; height: 1.5em; background-color: #333; top: -1.5em; right: 0; border-radius: 100% 0 0 0; }

로그인 후 복사

자동차 앞쪽의 바퀴 그리기:

.cab::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; left: 0.5em; }

로그인 후 복사

# #배기의 초기 상태 그리기:

.smoke, .smoke::before, .smoke::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: #333; right: -0.1em; bottom: -0.5em; border-radius: 50%; }

로그인 후 복사

배기 가스 애니메이션 추가:

.smoke { animation: smoke-1 2s infinite; } .smoke::before { animation: smoke-2 2s infinite; } .smoke::after { animation: smoke-3 2s infinite; } @keyframes smoke-1 { to { width: 3em; height: 3em; right: -3em; bottom: 0.5em; } } @keyframes smoke-2 { to { width: 2.5em; height: 2.5em; right: -6em; bottom: 0.8em; } } @keyframes smoke-3 { to { width: 3.5em; height: 3.5em; right: -4em; bottom: 0.2em; } }

로그인 후 복사

배기 가스 표류 효과 증가:

.smoke { animation: drift 2s infinite, smoke-1 2s infinite; } .smoke::before { animation: drift 3s infinite, smoke-2 3s infinite; } .smoke::after { animation: drift 4s infinite, smoke-3 4s infinite; } @keyframes drift { 0%, 100% { filter: opacity(0); } 15% { filter: opacity(0.9); } }

로그인 후 복사

# # 트럭 운전 애니메이션 효과 높이기:

.truck { animation: move 5s infinite; } @keyframes move { 0% { margin-left: 90%; } 50% { margin-left: 45%; } 100% { margin-left: 0; } 0%, 100% { filter: opacity(0); } 10%, 90% { filter: opacity(1); } }

로그인 후 복사

카드 운전 시 범프 애니메이션 효과 높이기:

.truck { animation: put-put 2s infinite, move 10s infinite; } @keyframes put-put { 0% { margin-top: 0; height: 5em; } 5% { margin-top: -0.2em; height: 5.2em; } 20% { margin-top: -0.1em; height: 5em; } 35% { margin-top: 0.1em; height: 4.9em; } 40% { margin-top: -0.1em; height: 5.1em; } 60% { margin-top: 0.1em; height: 4.9em; } 75% { margin-top: 0; height: 5em; } 80% { margin-top: -0.4em; height: 5.2em; } 100% { margin-top: 0.1em; height: 4.9em; } }

로그인 후 복사

완료!