css3动画奔跑的熊大案例

已于 2022-02-23 19:27:55 修改
阅读量130 收藏
点赞数
文章标签： css3
于 2022-02-23 19:26:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58498499/article/details/123097335
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    body {

        overflow: hidden;

        background-image: linear-gradient(to top, #9890e3 0%,#b1f4cf 100%);

    }

    * {

        margin: 0;

        padding: 0;

    }

    li {

        list-style: none;

    }

    @keyframes move {

        0% {

            top: 700px;

            left: 0;

        }

        100% {

            top: 700px;

            left: 750px;

        }

    }

    @keyframes run {

        0% {

            top: 0;

            left: 0;

        }

        100% {

            top: 0;

            left: -1600px;

        }

    }

    .bear {

        position: relative;

        bottom: 0;

        overflow: hidden;

        width: 200px;

        height: 100px;

        background-color: skyblue;

        animation: move 5s linear forwards;

    }

    .bear img {

        position: absolute;

        animation: run .8s steps(8) infinite;

        z-index: 999999;

    }

    .mon {

        height: 700px;

        animation: mon .5s ease 0s 1 forwards;

    }

    .mon .bg1 {

        position: absolute;

        height: 300px;

        width: 3840px;

        left: 0;

        bottom: -12px;

        z-index: 2;

        background: url(../css动画/images/bg1.png) repeat-x;

        animation: bg 50s linear infinite;

    }

    /* .mon .bg2 {

        position: absolute;

        width: 400px;

        height: 3840px;

        left: 0;

        bottom: -12px;

        z-index: 55;

        background: url(../css动画/images/bg2.png) repeat-x;

        animation: bg 50s linear infinite;

    } */

    .login {

        position: relative;

        top: -750px;

        left: 0;

        width: 400px;

        height: 300px;

        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

        border: 1px solid black;

        margin: 0 auto;

        padding: 20px 50px;

        border-radius: 30px;

        text-align: center;

    }

    .login h1 {

         color: white;  /*  拼错单词 while 这个单词是错的   */

    }

    .login .input {

        margin-top: 50px;

    }

    .login .box .input {

        margin-top: 20px;

    }

    .login .box .input input {

        outline: none;

        border: 0;

        padding: 10px 10px;

        background-color: #00000000;

        color: white;

    }

    .login   a .loginButton {

        display: inline-block;

        margin-top: 30px;

        width: 200px;

        height: 45px;

        color: #333333;

        border: 0;

        border-radius: 20px;

        line-height: 45px;

        cursor: pointer;

        background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

        text-align: center;

    }

    .input {

        position: relative;

    }

    .input img {

        width: 28px;

        position: absolute;

        top: 3px;

        right: 92px;

    }

    @keyframes mon {

        0% {

            transform: scale(1.5);

        }

        100% {

            transform: scale(1);

        }

    }

    @keyframes bg {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: -3840px 0;

        }

    }

    </style>

</head>

<body>

    <div class="bear">

        <img src="../css动画/images/bear.png" alt="">

    </div>

    <div class="mon">

        <div class="bg1"></div>

    </div>

    <div class="login">

            <h1>Welcome</h1>

        <div class="box">

            <div class="input">

                <input type="text" placeholder="请输入用户名">

            </div>

            <div class="input">

                <img src="./images/close.png" alt="" id="eye">

                <input type="password" placeholder="请输入密码" id="pwd">

            </div>

            <a href="#"><span class="loginButton">登陆</span></a>

        </div>

    </div>

    <script>

        // 1.获取元素

        var eye = document.getElementById('eye');

        var pwd = document.getElementById('pwd');

        //2.注册事件

        var flag = 0;

        eye.onclick = function() {

            if(flag == 0) {

                pwd.type = 'text';

                eye.src = './images/close.png';

                flag = 1;

            } else {

                pwd.type = 'password';

                eye.src = './images/open.png';

                flag = 0;

            }

        }

    </script>

</body>

</html>

 

qq_58498499
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3 动画+奔跑的熊案例
phoebemeng的博客
07-08 394
css3 动画
CSS动画效果-奔跑的熊
nuomi_w的博客
11-21 530
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
显示隐藏密码明文案例
weixin_51415327的博客
09-01 511
核心思路如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.
显示隐藏密码明文
weixin_48242257的博客
01-22 1570
显示隐藏密码明文 1. 核心思路 1.点击眼睛按钮,把密码框类型变为文本框就可以看见里面的密码 2.一个按钮两个状态,点击一次,切换为文本框,再点击一次,切换为密码框 3.算法:利用一个flag变量,来判断flag的值,如果是1,就切换为文本框,flag设置为0;如果是0,就切换为密码框,flag设置为1; 2. 代码 <title>显示隐藏密码明文</title> <style> .box{ width: 400p
js实现按钮修改表单单元格的内容
qq_35201250的博客
10-21 3092
js实现按钮修改文件的内容 这是js的一次作业，在网上搜了好久，搜到的要不是看不懂得，要不就是不符合题目要求的！ 我自己乱搞搞出来了一个方法，现po到这里，供大家参考（我是后端方向的，前端是真不会搞，大家将就看） 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网上订单</title> <style type="text/css"> bo
奔跑的熊大案例.rar
04-05
本案例"奔跑的熊大案例.rar"聚焦于利用CSS来实现动态的动画效果，特别是让一个元素（如熊大的形象）呈现出奔跑的动作。下面将详细介绍如何通过CSS动画技术来实现这一目标。 首先，我们要理解CSS动画的基础。CSS动画...
CSS3厕纸奔跑动画特效
06-24
【CSS3厕纸奔跑动画特效】是利用现代Web技术中的CSS3来实现的一种创新而有趣的视觉效果。在网页设计中，动画元素可以增加互动性和趣味性，使用户体验更佳。这款动画特效通过巧妙地运用CSS3的关键帧动画（keyframes）...
纯CSS3马儿奔跑动画特效
07-24
【纯CSS3马儿奔跑动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它无需JavaScript或者其他外部脚本，完全依赖CSS3的关键帧（keyframes）动画特性。这种技术在网页设计中越来越受欢迎，因为它可以提高网页...
CSS3动画实现小熊奔跑.rar
08-13
在本项目"CSS3动画实现小熊奔跑.rar"中，主要涉及的是利用CSS3的动画（animation）特性来创建一个动态的小熊奔跑效果。CSS3是层叠样式表的第三个版本，它引入了许多新的功能，其中动画是其一大亮点，为网页设计提供...
css3绘制马儿奔跑动画特效
06-11
在这个“css3绘制马儿奔跑动画特效”的项目中，我们主要利用了CSS3的关键帧动画（keyframes animation）来创建一匹马在屏幕上奔跑的视觉效果。 关键帧动画是CSS3中的一个强大工具，它允许开发者定义动画的不同阶段...
显示隐藏密码
m0_61685599的博客
10-12 1196
在我们登录某个账号时，一般情况下都是需要输入密码的。在输入密码时，默认情况下都是以小黑点代替输入的密码，这样可以防止密码外泄。但是，有时候我们自己输入密码输到一般时，突然被打断了，再来输的时候已经忘记输到哪个了，又不想重新输入，这时便可以点击旁边的小眼睛可以快速看到自己已经输入过的密码，用户体验变得更好。 效果： 操作： 首先使用html和css做出一个静态效果，代码如下： html部分： <div class="PwdBox"> <i...
js显示与隐藏密码明文案例
m0_62937694的博客
11-06 3079
这个案例核心是：通过点击事件click，每点击一次，让文本框和密码框交换，相应的也改变图片路径，用一个全局变量，来帮助判断条件，在每次判断完之后，注意要让变量取反；代码如下： <body> <div class="box"> <label for=""> <img src="img/yin.png" alt="" id="eye"> </label>
揭秘浏览器和Xshell中隐藏的密码：轻松找到并明文显示
ouyangzhenxin的博客
10-04 1594
PS：本文章仅供个人在属于自己的资源且正确的情况下进行使用，请合法使用，禁止进行非法操作。主旨在日常生活和工作中，经常会遇到以下两种情况：1、我们登录某些网站的时候，因为浏览器会记录密码，导致长时间过去之后，密码就忘记了；2、使用xshell连接服务器的之后，这个工具会记录密码，习惯性的使用记录功能，时间长了，也会忘记。果然，时间太可怕，时间一长什么时候都会忘记。那么，发生这种情况，我们应该如何处...
JS显示隐藏密码明文
m0_54490098的博客
07-14 1620
JS显示隐藏密码明文
JS交互-显示隐藏密码明文
Yjx的博客
12-12 1388
点击一个元素 显示隐藏密码 思路 ： 一个按钮有两个状态，点击一次 切换为文本框（显示密码），再点击一次回到密码框 2. 利用一个flag变量 初始为0，判断flag值 为1就切换为文本框（把flag设置为0） 为0就切换为密码框（把flag设置为1） <style> .box { position: relative; width: 400px; margin: 300px auto;
使用js修改input表单里的值，表单禁用disabled
爬楼梯的前端小白的博客
01-13 1526
通过js修改表单里的值value，以及表单禁用，只能被点击一次
WEB前端03-CSS3基础
最新发布
XYX_888的博客
07-13 946
CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。伪类是可以向某些选择器添加特殊效果的、一组CSS预定 义好的类，不需要进行id和class属性的声明，就能自动 地被支持CSS的浏览器所识别。盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。的网页元素定义显示样式。
html高级篇
qq_48257021的博客
07-04 1059
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值