[HTML+CSS][CSS3와 애니메이션] 05

개인공부/HTML5 + CSS3

[HTML+CSS][CSS3와 애니메이션] 05 - 연습문제

🍇박봉봉🍇 2020. 8. 1. 15:00

01

<!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;
    -webkit-transition-property: background;
    -moz-transition-property: background;
    -o-transition-property: background;
    -ms-transition-property: background;
    transition-property: background;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
  }
  .box:hover {
      background: yellow;
  }
</style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

02

<!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 {
      -webkit-transform: rotate(20deg);
      -moz-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
      -o-transform: rotate(20deg);
      transform: rotate(20deg);
      border: black 1px solid;
      border-radius: 10px;
    }
</style>
</head>

<body>
  <div class="container">
    <img src="images/coffee.jpg" class="photo">
  </div>
</body>
</html>

03

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS3 트랜스폼과 트랜지션</title>
	<style>	
	.photo {	
        margin-top:50px;	
	    margin-left:100px;

        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
	}
    .photo:hover {
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;

        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);

        box-shadow: 5px 5px 3px black;
    }
	</style>
</head>
<body>
	<img src="images/lamp.jpg" class="photo">	
</body>
</html>

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시