[HTML소스포함] 텍스트 애니메이션, JavaScript 예제

정보

[HTML소스포함] 텍스트 애니메이션, JavaScript 예제

yami_mov 2023. 12. 7. 14:53

728x90

텍스트 애니메이션

호기심과 재미

[HTML소스포함]

JavaScript 로 구현한

마우스를 올리면 텍스트가 회전하고 컬러가 변경되는
텍스트 애니메이션

텍스트 애니메이션

마우스를 올리면 텍스트가 회전하고 컬러가 변경됩니다.

소스입니다.

See the Pen Untitled by Yami LEE (@Yami-LEE) on CodePen.

--> 코드블럭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 애니메이션</title>
    <style>
        #animated-text {
            transition: transform 0.5s, color 0.5s;
            display: inline-block;
        }
        #container:hover #animated-text {
            transform: rotate(360deg);
            color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <p id="animated-text">호기심과 재미</p>
    </div>
</body>
</html>

ㅇ [HTML소스포함]JavaScript로 시계만들기

[HTML소스포함]JavaScript로 시계만들기

HTML과 CSS를 이용하여 시계의 모양을 만들고, JavaScript를 이용하여 시계의 시간을 실시간으로 업데이트합니다. 코드블럭 --> HTML 블럭 --> HTML 삽입 미리보기할 수 없는 소스

title2.tistory.com

ㅇ [HTML소스포함]JavaScript로 만나이 계산하기

[HTML소스포함]JavaScript로 만 나이 계산하기

만 나이 계산기 생년월일: 코드블럭 -> 만 나이 계산기 생년월일: 만 나이 계산기 생년월일: HTML블럭 -> HTML 삽입 미리보기할 수 없는 소스 만 나이 계산기 생년월일: calculateAge() 함수는 사용자가

title2.tistory.com

저작자표시 비영리 변경금지