css3+html5——嫦娥奔月

最新推荐文章于 2024-08-06 18:58:51 发布

十二Tel

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量841

点赞数 1

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80655157

版权

先提供两张照片：

效果如下：

代码如下：

<!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>