<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#ballBox{
		width:200px;
		height:200px;
		position:absolute;
		left:600px;
		animation-name:aniBox;
		animation-duration:8s;	
		animation-iteration-count:infinite;/*실행 횟수*/
		animation-direction:alternate;/*반복 방식*/
		
	}
	img{
		width:100%;
		height:100%;
		position:absolute;
		top:300px;
		animation-name:aniBall;
		animation-duration:0.7s;	
		animation-iteration-count:infinite;/*실행 횟수*/
		animation-direction:alternate;/*반복 방식*/
	}
	#shadowBox{
		width:200px;
		height:10px;
		position:absolute;
		left:600px;
		top:500px;
		animation-name:aniBox;
		animation-duration:8s;	
		animation-iteration-count:infinite;/*실행 횟수*/
		animation-direction:alternate;/*반복 방식*/

	}
	#shadow{
		width:200px;
		height:100%;

		background:black;
		position:absolute;
		animation-name:anishadow;
		animation-duration:0.7s;	
		animation-iteration-count:infinite;/*실행 횟수*/
		animation-direction:alternate;/*반복 방식*/
	}
	@keyframes aniBox{
		from{
			left:600px;

		}
		to{
			left:0px;
		}
	}
	@keyframes aniBall{
		from{
			top:300px;

		}
		to{
			top:0px;
		}
	}
	@keyframes anishadow{
		from{
			width:200px;
			height:100%;
		}
		to{ 
			width:20px;
			height:50%;
		}
	}
</style>
</head>
<body>
	<div id="ballBox">
		<img src="../images/soccerball.png"></img>
	</div>
	<div id="shadowBox">
		<div id="shadow"></div>
	</div>
</body>
</html>

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	/*모든 div의 너비, 높이를 200으로 일괄처리
		선택자에 쉼표를 사용하며, and의 의미로 연결할 수 있다.
		*/
	#box1, #box2, #box3{
		width:200px;
		height:200px;
		background:dodgerblue;
		margin:50px;
		color:white;
		font-size:30px;
		font-weight:bold;
	}
	#box1{
		transform:translate(600px, 300px);/*translate(좌/우,위/아래)*/
	}
	#box2{
		transform:rotate(40deg);/*rotate(회전각) +면 오른쪽, -면 왼쪽*/
	}
	#box3{
		transform:scale(2,2); /*scale(너비, 높이) 너비2배, 높이2배*/
	}
</style>
</head>
<body>
<h3>
	<pre>
		CSS3부터는 변형, 전이, 애니메이션 등을 지원하고, 특히 변형 시에는 transform을 명시해야 한다.
		Transform의 종류
		1. translate : 이동
		2. rotate : 회전
		3. scale : 크기(비율)  ex) 2는 두배
	</pre>
</h3>
	<div id="box1">이동</div>
	<div id="box2">회전</div>
	<div id="box3">크기</div>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - transition  (0) 2020.08.29
css - inline-block  (0) 2020.08.29
css - position 속성  (0) 2020.08.29
css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	div{
		margin:20px
	}
	#box1{
		width:100px;
		height:100px;
		background:gray;
		/*변화되는 시간을 늘려보자..*/
		transition:width 1s;	

	}
	#box1:hover{
		width:300px;
	}
	#box2{
		width:100px;
		height:100px;
		background:#ffffff;
		border:1px solid #4e9c9c;
		transition:background-color 1s;		
	}
	#box2:hover{
		background:#4e9c9c;
	}
	#box3{
		width:100px;
		height:100px;
		border:3px solid #4e9c9c;
		transition:border 1s;		
	}
	#box3:hover{
		border:10px solid #4e9c9c;
	}
	#box4{
		width:100px;
		height:100px;
		background-image:linear-gradient(to right, yellow, red )
		transition:background-image 2s;		
	}
	#box4:hover{
		background-image:linear-gradient(to left, orange, yellow )	
	}
</style>
</head>
<body>
<pre>
<h3>CSS3부터 프로그래밍에 의존하지 
않고도 간단한 애니메이션을 구현할 수 있다.
</h3>
</pre>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<div id="box4"></div>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - transform  (0) 2020.08.29
css - inline-block  (0) 2020.08.29
css - position 속성  (0) 2020.08.29
css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29

+ Recent posts

티스토리툴바