动画-实现一个摩天轮

尹蓝锐

已于 2022-04-04 14:20:44 修改

阅读量1.2k

点赞数

分类专栏：前端HTML 文章标签： html 前端 css

于 2021-11-22 00:29:44 首次发布

本文链接：https://blog.csdn.net/weixin_52249641/article/details/121463159

版权

前端HTML 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

实现一个摩天轮效果

1.全部代码
2.添加图片
3.定义动画
4.调用动画

1.全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: url("./img/2.jpg");
        }

        @keyframes zhuan {
            0%{transform: rotate(0)}
            /*50%{transform: translateY(500px)}*/
            100%{transform: rotate(360deg)}
        }
        @keyframes fanzhuan {
            0%{transform: rotate(360deg)}
            /*50%{transform: translateY(500px)}*/
            100%{transform: rotate(0deg)}
        }

        #box{
            position: relative;
            width: 600px;
            height: 600px;
            background: url("./img/a.png");
            background-size: 100% 100%;
            margin: 100px auto 0;
            animation: zhuan 10s linear infinite;
            /*linear后面不写值就可以一直转*/
        }
        #box>img{
            position: absolute;
            width: 100px;
            animation: fanzhuan 10s linear infinite;
            transform-origin: 50% 0;
            /*让模型以头为中心转*/
        }
        #box>img:nth-child(1){
            left: 250px;
            top: 20px;
        }

    </style>
</head>
<div id="box">
    <img src="./img/1.png" alt="">

</div>

<body>
</body>
</html>

实现的效果图如下：1.png是下面那个小人，a.png是背景摩天轮
在这里插入图片描述

2.添加图片

首先把需要的旋转的小人添加进去

<div id="box">
    <img src="./img/1.png" alt="">
</div>

3.定义动画

        @keyframes zhuan {
            0%{transform: rotate(0)}
            /*50%{transform: translateY(500px)}*/
            100%{transform: rotate(360deg)}
        }
        @keyframes fanzhuan {
            0%{transform: rotate(360deg)}
            /*50%{transform: translateY(500px)}*/
            100%{transform: rotate(0deg)}
        }

在这里定义了两个动画，一个名为 zhuan 一个为fanzhuan。
0%{transform: rotate(0)}
100%{transform: rotate(360deg)
两个动画分别从0°-360°，360°-0°进行旋转。
为什么定义两个动画呢？因为我们如果只定义zhuan这个动画，那么小人1.png将会和背景图a.png一起围绕着某点旋转，达不到目标效果，可将代码注释自行查看

4.调用动画

        #box{
            position: relative;
            width: 600px;
            height: 600px;
            background: url("./img/a.png");
            background-size: 100% 100%;
            margin: 100px auto 0;
            animation: zhuan 10s linear infinite;
            /*linear后面不写值就可以一直转*/
        }
        #box>img{
            position: absolute;
            width: 100px;
            animation: fanzhuan 10s linear infinite;
            transform-origin: 50% 0;
            /*让模型以头为中心转*/
        }

animation: fanzhuan 10s linear infinite;
调用zhuan动画，动画执行十秒为一个周期，linear动画从头到尾的速度是相同的，infinite动画永不停止
transform-origin: 50% 0;
设置变性中心点

尹蓝锐

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
动画-实现一个摩天轮

实现一个摩天轮效果1.全部代码2.添加图片3.定义动画4.调用动画1.全部代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: url("./img/2.jpg"); }
复制链接

扫一扫