CSS3

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<!-- 0.0 1.0
완전 투명 완전 불투명 
 -->
<style type="text/css">
body{

	font-family: "맑은 고딕", "고딕", "맑은";
}

.table1{

	border: 1px solid black;
	border-collapse: collapse;
}

.table1 td{
	border: 1px solid black;
	padding: 10px;
	text-align: center;
	/* vertical-align: top; */
	
}

img { 
	width:250px;
	height:150px;
	margin-top: 5px;
	opacity :1.0;
	

}/*  반투명 */
img:hover { opacity:0.5;} /* 완전 불투명 */


.images img{

	margin:10px;
	padding:5px;
	border:1px solid black;
	
}


.images {

	display: inline;

}

.images .invisible{
	visibility: hidden;
	
}


#div5 img{
	width: 200px;
	height:150px;
	border:1px solid black;
	transition:width 5s, height 5s, transform 5s;
	/* overflow: scroll; */
}

#div5 img:hover {

	width:200px;
	height:500px;
/* 	transform:rotate(180deg);  회전효과 (180도 회전) */
	transform:scale(1.5, 1.5)
}

#div6{
	width:100px;
	height: 100px;
	position: relative;
	animation: 2s myanim;  /* 2초 동안 키프레임 애니메이션 */
	animation-iteration-count: 5;  /* 반복횟수 */
	background: #333333;
}

@keyframes myanim {
	0% { left:0px; top:0px}
	25% { left:100px; top:50px;}
	50% { left:200px; top:100px;}
	75% { left:100px; top:50px;}
	100% { left:0px; top:0px;}
}


</style>

<script type="text/javascript">


function imagesShow(opt){
	
	//img2=document.getElementsByClassName("images");
	img2=document.getElementById("img2");
	img2.style.visibility = opt;
	//getElementsByClassName
	
}

</script>

</head>
<body>

<table class="table1">
	<caption>프로축구 경기 일정</caption>
	
	<tr>
		<td>울산</td>
		<td>울산 vs 인천</td>
	</tr>


	<tr>
		<td>부산</td>
		<td>부산 vs 대전</td>
	</tr>
	
	<tr>
		<td>서울</td>
		<td>서울 vs 강원</td>
	</tr>
</table>



<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg"> <br/>

<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg"> 
</div>


<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg" class="invisible" id="img2"> 
</div>


<div class="images">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg"> 
</div>
<br/>

<button id="button1"  onclick="imagesShow('visible')">표시</button>

<button id="button1"  onclick="imagesShow('hidden')">숨김</button>

<br>


<div id="div5">
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg"> 
</div>



<div id="div6">

</div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

군자는 타인의 좋은 점을 말하고 악한 점을 말하지 않는다. 반대로 소인은 타인의 좋은 점은 말하지 않고 악한 점만 말한다. -공자

댓글 ( 0)

댓글 남기기

작성