<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大及缩小</title>
<style>
img{
position:relative;
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
img:hover{
-webkit-transform:rotate(10deg) scale(2);
-moz-transform:rotate(10deg) scale(2);
-o-transform:rotate(10deg) scale(2);
-ms-transform:rotate(10deg) scale(2);
transform:rotate(10deg) scale(2);
z-index:2;
}
img:hover:after{
content:attr(alt);
display:block;
position:absolute;
bottom:-45px;
left:0;
z-index:2;
text-align:center;
}
</style>
</head>
<body>
<img alt="html5" alt="琳琅天上" src="images/2.ico"/>
<img alt="html5" width="100" height="100" alt="阿萨德" src="images/css3.png"/>
<img class="css" width="200" height="200" alt="html5" alt="炫斗" src="images/3.ico"/>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>放大及缩小</title>
<style>
img{
position:relative;
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
img:hover{
-webkit-transform:rotate(10deg) scale(2);
-moz-transform:rotate(10deg) scale(2);
-o-transform:rotate(10deg) scale(2);
-ms-transform:rotate(10deg) scale(2);
transform:rotate(10deg) scale(2);
z-index:2;
}
img:hover:after{
content:attr(alt);
display:block;
position:absolute;
bottom:-45px;
left:0;
z-index:2;
text-align:center;
}
</style>
</head>
<body>
<img alt="html5" alt="琳琅天上" src="images/2.ico"/>
<img alt="html5" width="100" height="100" alt="阿萨德" src="images/css3.png"/>
<img class="css" width="200" height="200" alt="html5" alt="炫斗" src="images/3.ico"/>
</body>
</html>
