Guru Nanak dev ji Jayanti가 HTML CSS와 자바스크립트 코드를 사용한 특수 애니메이션-JS 튜토리얼-php.cn

Guru Nanak dev ji Jayanti가 HTML CSS와 자바스크립트 코드를 사용한 특수 애니메이션

Mary-Kate Olsen

풀어 주다： 2024-11-26 04:56:14

원래의

262명이 탐색했습니다.

Guru Nanak dev ji Jayanti special animation using html css and javascript code

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Guru Nanak Jayanti 애니메이션</title>
    <스타일>
        몸 {
            배경: 선형 그라데이션(135deg, #ffeb3b, #f57f17);
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            오버플로: 숨김;
            여백: 0;
            글꼴 계열: '포핀스', 산세리프;
            위치: 상대;
        }
        .컨테이너 {
            텍스트 정렬: 중앙;
            색상: #fff;
            애니메이션: fadeIn 2s easy-in-out;
        }
        .컨테이너 img {
            너비: 200px;
            높이: 자동;
            여백 하단: 10px;
            애니메이션: 글로우 2s 무한 대체;
        }
        h1 {
            글꼴 크기: 2rem;
            텍스트 그림자: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        .가르치는 것 {
            여백 상단: 20px;
            디스플레이: 플렉스;
        }
        .teaching-box {
            너비: 160px;
            높이: 100px;
            여백: 10px 자동;
            패딩: 15px;
            배경: #333;
            테두리 반경: 12px;
            상자 그림자: 0 4px 15px rgba(0, 0, 0, 0.2);
            불투명도: 0;
            변환: 번역Y(50px);
            애니메이션: SlideUp 1.5초 앞으로;
        }
        .teaching-box:nth-child(1) {
            배경: #ff7043; /* 주황색 */
            애니메이션 지연: 0.5초;
        }
        .teaching-box:nth-child(2) {
            배경: #42a5f5; /* 파란색 */
            애니메이션 지연: 1초;
        }
        .teaching-box:nth-child(3) {
            배경: #66bb6a; /* 녹색 */
            애니메이션 지연: 1.5초;
        }
        .teaching-heading {
            글꼴 크기: 1.4rem;
            글꼴 두께: 굵게;
            여백 하단: 5px;
        }
        .teaching-subtext {
            글꼴 크기: 1rem;
        }
        .꽃 {
            위치: 절대;
            상단: -50px;
            너비: 100%;
            높이: 100%;
            포인터 이벤트: 없음;
            디스플레이: 플렉스;
            플렉스 랩: 랩;
        }
        .꽃 {
            위치: 절대;
            글꼴 크기: 30px;
            애니메이션: 선형 무한 가을;
        }
        @keyframes 가을 {
            { 변환: 변환Y(-100vh) 회전(0deg); }
            { 변환: 번역Y(100vh) 회전(360deg); }
        }
        @keyframes fadeIn {
            {불투명도: 0; }
            {불투명도: 1; }
        }
        @keyframes 글로우 {
            { 필터: drop-shadow(0 0 10px #fff); }
            { 필터: drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes 슬라이드업 {
            { 변환: 번역Y(0); 불투명도: 1; }
        }/* 꽃 버튼 */
        .꽃버튼 {
            위치: 고정;
            오른쪽: 20px;
            하단: 20px;
            글꼴 크기: 30px;
            배경: 없음;
            테두리: 없음;
            커서: 포인터;
            애니메이션: 글로우 1.5초 무한 대체;
        }
    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 Guru Nanak dev ji Jayanti가 HTML CSS와 자바스크립트 코드를 사용한 특수 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!