用html简单写了一个小游戏

最新推荐文章于 2024-05-04 08:02:12 发布

鲸弋

最新推荐文章于 2024-05-04 08:02:12 发布

阅读量1.2w

点赞数 8

文章标签： js javascript css

本文链接：https://blog.csdn.net/weixin_43469637/article/details/105847129

版权

效果图
点击变长出现棍子，小人跑过去，如果跑不过去看小广告复活

在这里插入图片描述
广告页面

自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .one{
   
            background: blueviolet;
            position: absolute;
            left: 500px;
            height: 10px;
            width: 0px;
            transform: rotate(-90deg);
            bottom: 45%;

            transform-origin: 0 100%;

            transition:transform 0.5s linear;
        }

        .two{
   
            transform: rotate(0deg);
        }

        .ren{
   
            position: absolute;
            left: 450px;
            bottom: 45%;

        }
        .well{
   
            position: absolute;
            left: 450px;
            bottom: 20%;
            background: black;
            height: 200px;
            width: 100px;

        }
        .man img.rotate{
   
            transform:translate(0px,300px);
            -ms-transform:translate(0px,300px);
            -moz-transform:translate(0px,300px);
            -webkit-transform:translate(0px,300px);
            -o-transform:translate(0px,300px);

            transform-origin:100% 100%;
            -ms-transform-origin:100% 100%;
            -moz-transform-origin:100% 100%;
            -webkit-transform-origin:100% 100%;
            -o-transform-origin:100% 100%;

        }
    </style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<input type="button" value="点我变长">
<h1>您的分数为：<span id="num">0</span></h1>

<div>
    <div class="one"></div>
    <div class="ren"><img src="img/stick_stand.png"></div>
    <div class=