css3+html5——嫦娥奔月
发布时间
阅读量：
阅读量
先提供两张照片：
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嫦娥</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #111111;
}
.wrap{
width: 470px;
height: 470px;
margin: 50px auto;
border: 10px solid white;
text-align: center;
}
.wrap .moon{
margin-top: 50px;
}
.wrap .ce{
position: relative;
margin-top: -550px;
margin-left: -350px;
opacity: 0;/*透明度：全透明*/
transition-duration: 2s;/*动画过渡时间*/
}
.wrap:hover .ce{
transition-duration: 2s;
transform: translate(100px,100px);/*嫦娥移动方向*/
opacity: 1;/*透明度：不透明*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="moon">
<img src="../img/moon.png" alt="" width="430" height="430">
</div>
<div class="ce">
<img src="../img/嫦娥.png" alt="" width="300" height="300">
</div>
</div>
</body>
</html>全部评论 (0)
还没有任何评论哟~