반응형
Q>
CSS를 이용해 다음과 같은 변환 효과를 내는 HTML 문서를 작성하시오
1. 마우스가 위에 있으면 사각형이 360도 회전한다.
2. 사각형의 색상은 빨상색에서 노랑색으로 변한다.
3. 사각형의 크기는 2배가 된다.
A>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: red;
height: 250px;
width: 250px;
-webkit-transition: width 5s, height 5s, -webkit-transform 5s;
}
div:hover {
background-color: yellow;
width: 500px;
height: 500px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
R>
 |
|
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 4 (0) | 2020.12.02 |
|---|---|
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 3 (0) | 2020.12.02 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 1 (0) | 2020.11.23 |
| [Ch5]CSS 박스 모델과 응용 연습문제 4 (0) | 2020.11.15 |
| [Ch5]CSS 박스 모델과 응용 연습문제 3 (0) | 2020.11.15 |
