前端HTMl摩天轮展示

最新推荐文章于 2023-04-04 19:13:57 发布

阿拉斯加的头头儿

最新推荐文章于 2023-04-04 19:13:57 发布

阅读量1.7k

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44196534/article/details/108684931

版权

前端HTMl摩天轮展示

效果图演示：

在这里插入图片描述

主要函数：

transform函数： -360度是指逆时针旋转360度

 transform: rotate(-360deg);

绝对定位：

绝对定位是找到自己的拥有定位的父级节点位置，父级没有就继续向上，最后都没有就默认body

position: absolute;
top: 82px;
left: 70px;

相对定位：

跟绝对定位是绝配

  position: relative;

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 去掉浏览器默认样式 */
            margin: 0;
            padding: 0;

        }

        .bg {
            width: 768px;
            height: 768px;
            background-image: url(../案例讲解/摩天轮/images/fsw.png);
            /* 添加相对定位 */
            position: relative;
            /* 定义bg的位置，向下100px,水平居中 */
            margin: 100px auto;
            /* 添加动画 */
            animation: move 5s infinite linear;
        }


        .img1 {
            /* 添加绝对定位，固定在相对拥有定位的父级节点（bg)
    的top:80 left:70位置 */
            position: absolute;
            top: 82px;
            left: 70px;
            /* 动画效果:img1 持续时间：5s 持续次数:无限 速度:匀速 */
            animation: img1 5s infinite linear;
        }

        .img2 {
            /* 添加绝对定位 */
            position: absolute;
            top: 82px;
            left: 600px;
            /* 动画效果:img2 持续时间：5s 持续次数:无限 速度:匀速 */
            animation: img2 5s infinite linear;
        }

        /* 摩天轮动画 */
        @keyframes move {
            to {
                /* 摩天轮顺时针转360度 */
                transform: rotate(360deg);
            }
        }

        /* 游客动画 */
        @keyframes img1 {
            to {
                /* 游客逆时针转360度 */
                transform: rotate(-360deg);
            }
        }

        /* 游客动画 */
        @keyframes img2 {
            to {
                /* 游客逆时针转360度 */
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="view">
            <img src="../案例讲解/摩天轮/images/boy.png" alt="" class="img1">
            <img src="../案例讲解/摩天轮/images/dog.png" alt="" class="img2">

        </div>

    </div>

</body>

</html>

注意：

通过相对定位和绝对定位的搭配，两个游客就会固定在摩天轮图的某位置当摩天轮转动，游客会跟着转动。

但是需要注意，此时游客头部不是永久朝上的（如下图），所以需要游客图自身相反的转动，这样游客的头部就会永远朝上。

在这里插入图片描述

阿拉斯加的头头儿

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
前端HTMl摩天轮展示

前端HTMl摩天轮展示效果图演示：主要函数：transform函数： -360度是指逆时针旋转360度 transform: rotate(-360deg);绝对定位：绝对定位是找到自己的拥有定位的父级节点位置，父级没有就继续向上，最后都没有就默认bodyposition: absolute;top: 82px;left: 70px;相对定位：跟绝对定位是绝配 position: relative;代码：<!DOCTYPE html><html la
复制链接

扫一扫