HTML CSS와 JS 코드를 사용한 크리스마스 트리 애니메이션
- Mary-Kate Olsen원래의
- 2024-12-27 22:16:11904검색
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>3D 크리스마스 트리</title>
<스타일>
몸 {
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
높이: 100vh;
여백: 0;
배경색: #000;
원근감: 1000px; /* 장면에 원근감을 추가합니다 */
}
.나무 {
위치: 상대;
변환 스타일: 보존-3D; /* 자식이 3D 공간에서 렌더링되는지 확인 */
변환: 회전X(30deg); /* 올바른 방향을 향하도록 나무를 회전합니다 */
}
.별 {
위치: 절대;
글꼴 크기: 12px;
불투명도: 0;
애니메이션: 반짝반짝 1초 무한 번갈아 가며 5초 앞으로 나타납니다.
}
@keyframes 반짝임 {
{불투명도: 1; }
{불투명도: 0.5; }
}
@keyframes 표시 {
{불투명도: 0; }
{불투명도: 1; }
}
</스타일>
</머리>
<본문>
<div>
위 내용은 HTML CSS와 JS 코드를 사용한 크리스마스 트리 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.