transition

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.change{
width: 100%;
height: 800px;
display: block;
background: url(images/main.jpg) no-repeat;
background-size: 100% 100%;

}
.change img{
width: 218px;
height: 220px;
/*transform:rotate(-15deg);*/
/*-ms-transform:rotate(-15deg);*/ /* IE 9 */
/*-moz-transform:rotate(-15deg); */ /* Firefox */
/*-webkit-transform:rotate(-15deg); *//* Safari 和 Chrome */
/*-o-transform:rotate(-15deg);*/ /* Opera */
display: block;
opacity: 0;
transition:opacity 1s ease-in-out 1s,transform 1s ease-in-out;
-webkit-transform: translate(-800px,-450px);
position: absolute;
right: 30%;
top: 60%;
}
.change:hover img{
opacity: 1;
-webkit-transform:translate(0px,-0px);
transition:opacity 1s ease-in-out,transform 1s ease-in-out .1s;
}

</style>
<body>
<div class="main">
<a href="#" class="change" target="_blank">
<img src="images/1.png">
</a>
</div>
</body>
</html>

posted @ 2016-06-30 14:51  YAMI萌糖  阅读(128)  评论(0)    收藏  举报