728x90
호기심과 재미
![[HTML소스포함]_텍스트_애니메이션,_JavaScript_예제](https://blog.kakaocdn.net/dn/yD6Jm/btsBXKny2ss/hePGoYC14A19Kprcb65KN1/img.png)
[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
반응형
'정보' 카테고리의 다른 글
| [HTML소스포함] "Canvas 게임", JavaScript 예제 (0) | 2023.12.07 |
|---|---|
| [HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript 예제 (0) | 2023.12.07 |
| 샤토 슈발블랑(Cheval Blanc) 프리미어 그랑크뤼 프랑스 보르도 와인 (0) | 2023.06.01 |
| "Sassicaia" 이탈리아 섬세하고 혁신적인 와인 (1) | 2023.05.28 |
| 말 잘하는 비법!! 좋은 인간관계 향상을 위한 효과적인 방법 (0) | 2023.05.27 |
댓글