✨ 유리 모양의 트위스트를 사용한 빛나는 디스코 전구 애니메이션! ✨ 코드 HTML CSS 및 자바스크립트
- Patricia Arquette원래의
- 2024-12-24 17:25:13412검색
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>디스코 벌브 애니메이션</title>
<스타일>
몸 {
여백: 0;
높이: 100vh;
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
배경: 선형 그라데이션(45deg, #000000, #111111);
글꼴 모음: Arial, sans-serif;
}
.컨테이너 {
디스플레이: 플렉스;
간격: 200px;
}
.벽 {
디스플레이: 플렉스;
플렉스 방향: 열;
내용 정당화: 공백 사이;
높이: 300px;
패딩: 15px;
테두리 반경: 10px;
배경: rgba(96, 95, 95, 0.281);
배경 필터: 흐림(10px);
상자 그림자: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.전구 {
너비: 60px;
높이: 60px;
배경: rgba(255, 255, 255, 0.1);
테두리: 2px 솔리드 rgba(255, 255, 255, 0.2);
테두리 반경: 50%;
배경 필터: 흐림(10px);
상자 그림자: 0 0 5px rgba(255, 255, 255, 0.2), 삽입 0 0 10px rgba(255, 255, 255, 0.1);
전환: 상자 그림자 0.3초, 배경색 0.3초;
}
.bulb.glow {
애니메이션: 디스코 0.2초 무한 대체;
}
@keyframes 디스코 {
0% {
배경색: rgba(255, 0, 128, 0.8);
상자 그림자: 0 0 40px 40px rgba(255, 0, 128, 0.8);
}
25% {
배경색: rgba(0, 255, 128, 0.8);
상자 그림자: 0 0 30px 10px rgba(0, 255, 128, 0.8);
}
50% {
배경색: rgba(0, 128, 255, 0.8);
상자 그림자: 0 0 30px 10px rgba(0, 128, 255, 0.8);
}
75% {
배경색: rgba(255, 255, 0, 0.8);
상자 그림자: 0 0 30px 10px rgba(255, 255, 0, 0.8);
}
100% {
배경색: rgba(255, 128, 0, 0.8);
상자 그림자: 0 0 30px 10px rgba(255, 128, 0, 0.8);
}
}
.시작 버튼 {
위치: 절대;
하단: 50px;
패딩: 15px 30px;
배경: #ff5722;
색상: 흰색;
테두리: 없음;
테두리 반경: 10px;
커서: 포인터;
글꼴 크기: 18px;
글꼴 두께: 굵게;
상자 그림자: 0 4px 8px rgba(0, 0, 0, 0.5);
전환: 배경 0.3초;
}
.start-버튼:호버 {
배경: #ff784e;
}
</스타일>
</머리>
<본문>
<div>
위 내용은 ✨ 유리 모양의 트위스트를 사용한 빛나는 디스코 전구 애니메이션! ✨ 코드 HTML CSS 및 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html Filter pointer display position margin padding border viewport background transition animation column flex
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.