조건
1. 기존 사각형의 속성 중 배경 색을 yellow로 바꿉니다.
2. 배경 색이 천천히 바뀌도록 transition 속성을 사용하는데 적용 속성은 배경이고 진행 시간은 1초로 합니다.연습문제 1~3
1. 13/quiz-1.html에 있는 사각형에 마우스 포인터를 올렸을 때 다음 조건에 맞게 transition속성을 적용하세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
body {
padding-top:50px;
padding-left:50px;
}
.box {
width: 100px;
height: 100px;
background: green;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
body {
padding-top:50px;
padding-left:50px;
}
.box {
width: 100px;
height: 100px;
background: green;
border: 1px solid black;
border-radius: 5px;
}
.box:hover {
background-color: yellow;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2. 13/quiz-2.html문서를 열어 보면 이미지 파일이 화면에 삽입되어 있습니다. 이미지 위로 마우스 포인터를 올렸을 때 다음 조건에 맞게 이미지가 변형되도록 소스를 수정하세요.
조건
1. 이미지 20도 회전합니다.
2. 이미지 테두리가 1px짜리 검은 실선으로 바뀝니다.
3. 테두리의 모서리 부분을 10px만큼 둥글게 처리합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
.container {
width:500px;
margin:50px auto;
}
.photo {
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<img src="images/coffee.jpg" class="photo">
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
.container {
width:500px;
margin:50px auto;
}
.photo {
border:1px solid #ccc;
}
.photo:hover {
border: black solid;
border-width: 1px;
border-radius: 10px;
transition: all;
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="container">
<img src="images/coffee.jpg" class="photo">
</div>
</body>
</html>
3. transition 속성과 transform속성을 이용해 사진 위로 마우스 포인터를 가져갈 때 사진이 확대되는 애니메이션을 만들려고 합니다. 13/quiz-3.html 문서를 가져와 다음 조건에 맞게 수정하세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS3 트랜스폼과 트랜지션</title>
<style>
.photo {
margin-top:50px;
margin-left:100px;
}
</style>
</head>
<body>
<img src="images/lamp.jpg" class="photo">
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS3 트랜스폼과 트랜지션</title>
<style>
.photo {
margin-top:50px;
margin-left:100px;
}
.photo:hover {
transition: all;
transition-duration: 1s;
transform:scale(150%, 150%);
transform-origin: left top;
box-shadow: 5px 5px 3px black;
}
</style>
</head>
<body>
<img src="images/lamp.jpg" class="photo">
</body>
</html>'HTML > CSS3와 애니메이션' 카테고리의 다른 글
| CSS3와 애니메이션 (0) | 2021.08.23 |
|---|