mini 일상 공감대

페이지 화면 무지개색으로 만들기 태그(마퀴태그) 본문

└좋은정보

페이지 화면 무지개색으로 만들기 태그(마퀴태그)

ho2jja𢉢 2023. 9. 23. 15:31
반응형

페이지 화면 무지개색으로 만들기 

태그(마퀴태그)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rainbow Background</title>
    <style>
        /* 무지개색 배경을 가진 스타일 설정 */
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
            background-size: 1400% 1400%;
            animation: rainbow 5s linear infinite; /* 애니메이션 적용, 빠른 속도 */
        }

        @keyframes rainbow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* 페이지 내용 스타일 추가 */
        .content {
            text-align: center;
            padding: 20px;
        }

        h1 {
            font-size: 36px;
            color: white;
        }

        p {
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Welcome to My Rainbow Website</h1>
        <p>This is a beautiful rainbow background created using HTML and CSS.</p>
    </div>
</body>
</html>

 

Rainbow Background

Welcome to My Rainbow Website

This is a beautiful rainbow background created using HTML and CSS.

반응형

'└좋은정보' 카테고리의 다른 글

휴일 지킴이 약국 검색  (0) 2023.09.30
2023년 엑스(트위터)에 올리기 가장 좋은 요일별 시간때  (0) 2023.09.26
움직이는 글자 마퀴태그(HTML)모음  (0) 2023.09.23
마퀴태그(HTML) 연습장  (0) 2023.09.23
'└좋은정보' Related Articles more