HTML CSS와 자바스크립트를 사용한 최면 나선형 환상
- Mary-Kate Olsen원래의
- 2024-12-04 15:42:12837검색
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>최면 나선형 애니메이션</title>
<스타일>
* {
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
배경: #000;
오버플로: 숨김;
색상: #fff;
}
몸 {
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
높이: 100vh;
}
.나선형 {
위치: 상대;
너비: 200px;
높이: 200px;
애니메이션: 4s 선형 무한 회전;
}
.spiral::이전 {
콘텐츠: '';
위치: 절대;
상단: 0;
왼쪽: 0;
너비: 100%;
높이: 100%;
테두리 반경: 50%;
테두리: 2px 솔리드 투명;
테두리 이미지: 원뿔형 그라데이션(0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00에서);
테두리 이미지 슬라이스: 1;
애니메이션: animateSpiral 10s 선형 무한;
}
.파도 {
위치: 절대;
상단: 50%;
왼쪽: 50%;
변환: 변환(-50%, -50%);
테두리 반경: 50%;
테두리: 2px 솔리드 rgba(255, 255, 255, 0.3);
애니메이션: ExpandWave 1s 이지아웃 무한;
}
@keyframes 스핀 {
0% { 변환: 회전(0deg); }
100% { 변환: 회전(360deg); }
}
@keyframes animateSpiral {
0%, 100% { 변환: scale(1); }
50% { 변환: scale(0.5); }
}
@keyframes ExpandWave {
0% {
너비: 0;
높이: 0;
불투명도: 1;
}
100% {
너비: 500px;
높이: 500px;
불투명도: 0;
}
}
</스타일>
</머리>
<본문>
<div>
위 내용은 HTML CSS와 자바스크립트를 사용한 최면 나선형 환상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html using display position overflow margin padding border viewport background transform animation flex Translate
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.