✨ 유리 모양의 트위스트를 사용한 빛나는 디스코 전구 애니메이션! ✨ 코드 HTML CSS 및 자바스크립트-JS 튜토리얼-php.cn

✨ 유리 모양의 트위스트를 사용한 빛나는 디스코 전구 애니메이션! ✨ 코드 HTML CSS 및 자바스크립트

Patricia Arquette

풀어 주다： 2024-12-24 17:25:13

원래의

402명이 탐색했습니다.

✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code HTML CSS AND JAVASCRIPT

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!