移动的小狗

最新推荐文章于 2024-11-10 22:45:39 发布
最新推荐文章于 2024-11-10 22:45:39 发布
阅读量153 收藏 2
点赞数 2
文章标签： 前端 动画 html css 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lak_an_ke/article/details/125771830
版权
这篇博客展示了如何使用HTML和CSS创建一个移动的小狗动画。通过设置盒子的大小、边框、圆角、定位和层级，以及运用关键帧动画实现小狗的移动和变形效果。代码详细展示了各个部分（如耳朵、眼睛、身体等）的样式和位置，形成一只可爱的小狗形象，并在页面上循环移动。
摘要由CSDN通过智能技术生成

 一·、移动的小狗是利用html和css做出

  1. 利用的知识点：                
  • 盒子的的大小和边框圆角来构建盒子的形状
  • 盒子的定位来调整盒子的位置

  • z-index: ;调整盒子的层级

  • 动画来调整狗的移动和放大缩小

 代码如下：

<!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{
            background-color: #cccccc;
        }
        .dog{
            width:289px;
            height: 481px;
            margin-top: 150px;
            position: relative;
            animation:dog 20s linear 0s infinite alternate;
        }
        @keyframes dog {
            0%{
                left: 0;
                transform: scale(0.2);
            }
            25%{
                left: 200px;
                transform: scale(0.4);
            }
            50%{
                left: 400px;
                transform: scale(0.8);
            }
            75%{
               left: 600px;
               transform: scale(1);
            }
            100%{
                left: 800px;
                transform: scale(1.2);
            }
        }
        .Dogchains{
            width:479px;
            height:256px;
            border-left:#ff6b5a solid 6px;
            border-bottom:#ff6b5a solid 6px ;
            position: absolute;
            top:226px;
            left:205px;
            border-radius: 0 0 0 100px;
            z-index: 4;

        }
        .leftear{
            width: 55px;
            height: 116px;
            background-color:#6c3129;
            position: absolute;
            left: 55px;
            border-radius: 50% 50% 0 0;
        }
        .rightear{
            width: 55px;
            height: 116px;
            background-color:#6c3129;
            position: absolute;
            right:55px;
            border-radius: 50% 50% 0 0;
        }
        .body0{
            width: 180px;
            height: 447px;
            background-color:#e2aa23;
            border-radius: 100px 100px 0 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 35px auto;
           z-index: 1;
        }
        .lefteye{
            width: 15px;
            height: 15px;
            background-color:#763f2f;
            border-radius: 50%;
            position: absolute;
            top: 51px;
            right:110px;
            z-index: 2;
        }
        .righteye{
            width: 15px;
            height: 15px;
            background-color:#763f2f;
            border-radius: 50%;
            position: absolute;
            top: 51px;
            left: 110px;
            z-index: 2;
        }
        .bridge{
            width: 30px;
            height: 34px;
            background-color:#fff;
            border-radius: 100px 100px 0 0;
            position: absolute;
            top:38px;
            left: 130px;
            z-index: 3;
        }
        .nose{
            width:30px;
            height:14px;
            background-color:#4a2425;
            border-radius: 0 0 100px 100px;
            position: absolute;
            top:68px;
            left: 130px;
            z-index: 3;
        }
        .cheek{
            width:84px;
            height:100px;
            background-color:#fff;
            border-radius: 85% 85% 100px 100px;
            position: absolute;
            top:72px;
            left: 103px;
            z-index: 2;
        }
        .mouth{
            width:45px;
            height:15px;
            background-color:#1a243c;
            border-radius: 0 0 100px 100px;
            position: absolute;
            top:105px;
            left:122px;
            z-index: 2;
        }
        .tongue{
            width:30px;
            height:50px;
            background-color:#ff6b5a;
            border-radius:5px 5px 15px 15px;
            position: absolute;
            top:110px;
            left:130px;
            z-index: 3;
        }
        .whiskers{
            width:43px;
            height:20px;
            background-color:#e4e6e7;
            border-radius:0px 0px 100px 100px;
            position: absolute;
            top:165px;
            left:125px;
            z-index: 3;
        }
        .sash{
            width: 180px;
            height: 46px;
            background-color:#ff6b5a;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 195px auto;
           z-index: 2;
        }
        .Beltbigball{
            width: 50px;
            height: 50px;
            background-color:#ffc442;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 217px auto;
           z-index: 3;
        }
        .belly{
            width: 84px;
            height: 194px;
            background-color:#fff;
            border-radius: 100px 100px 0 0;
            position: absolute;
            left:103px;
            bottom: 0;
           z-index: 2;
        }
        .Beltballs{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            left:47px;
        }
        .Beltballs1{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            left:70px;
            z-index:3;
        }
        .Beltballs2{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            left:170px;
            z-index:3;
        }
        .Beltballs3{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            right:170px;
            z-index:3;
        }
        .Beltballs4{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            right:70px;
            z-index:3;
        }
        .Beltballs5{
            width: 16px;
            height: 16px;
            background-color:#fff;
            border-radius:50%;
            position: absolute;
            top:210px;
            right:47px;
        }
        .tail{
            width: 20px;
            height: 106px;
            background-color: #934730;
            transform: rotate(45deg);
            position: absolute;
            bottom: 55px;
            right: 30px;
            border-radius: 100px 100px 0 0;
        }
        .leftleg{
            width: 19px;
            height: 64px;
            background-color: #a45f2e;
            position: absolute;
            bottom: 17px;
            left: 36px;
            border-radius: 100px 0 0 0;
        }
        .rightleg{
            width: 19px;
            height: 64px;
            background-color: #a45f2e;
            position: absolute;
            bottom: 17px;
            right: 36px;
            border-radius: 0 100px 0 0;
        }
        .foot{
            width: 289px;
            height: 17px;
            background-color: #a45f2e;
            border-radius: 100px 100px 0 0;
            position: absolute;
            bottom: 0;
        }
        .leftankle{
            width: 42px;
            height: 17px;
            background-color: #d18d2d;
            border-radius: 100px 100px 0 0;
            position: absolute;
            bottom: 0;
            left: 36px;
            z-index: 2;
        }
        .rightankle{
            width: 42px;
            height: 17px;
            background-color: #d18d2d;
            border-radius: 100px 100px 0 0;
            position: absolute;
            bottom: 0;
            right:36px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="dog"><!-- 狗整体 -->
        <div class="Dogchains"></div><!-- 狗链 -->
        <div class="leftear"></div><!-- 左耳朵 -->
        <div class="rightear"></div><!-- 右耳朵 -->
        <div class="body0"></div><!-- 身体 -->
        <div class="lefteye"></div><!-- 左眼 -->
        <div class="righteye"></div><!-- 右眼 -->
        <div class="nose"></div><!-- 鼻子 -->
        <div class="bridge"></div><!-- 鼻梁 -->
        <div class="cheek"></div><!-- 脸颊 -->
        <div class="mouth"></div><!-- 嘴 -->
        <div class="tongue"></div><!-- 舌头 -->
        <div class="whiskers"></div><!-- 胡须 -->
        <div class="sash"></div><!-- 腰带 -->
        <div class="Beltbigball"></div><!-- 腰带大球 -->
        <div class="Beltballs"></div><!-- 腰带小球 -->
        <div class="Beltballs1"></div><!-- 腰带小球 -->
        <div class="Beltballs2"></div><!-- 腰带小球 -->
        <div class="Beltballs3"></div><!-- 腰带小球 -->
        <div class="Beltballs4"></div><!-- 腰带小球 -->
        <div class="Beltballs5"></div><!-- 腰带小球 -->
        <div class="belly"></div><!-- 腹 -->
        <div class="tail"></div><!-- 尾巴 -->
        <div class="leftleg"></div><!-- 左腿 -->
        <div class="rightleg"></div><!-- 右腿 -->
        <div class="foot"></div><!-- 脚 -->
        <div class="leftankle"></div><!-- 左脚踝 -->
        <div class="rightankle"></div><!-- 右脚踝 -->
    </div>
</body>
</html>

效果如下：

QQ录屏20220713202648

楠柯如梦
关注
第5关：创建 img 标签
weixin_45784564的博客
05-22 2663
目录任务描述编程要求测试说明源码 任务描述 本关任务：创建一个img标签， 图片的地址是https://www.educoder.net/attachments/download/207801，提示文字是小狗走路。 效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签img标签， 图片的地址是https://www.educoder.net/attachments/download/207801，提示文字是小狗走路的创建任务。 测试说明 平台会
html svg 移动缩放,SVG缩放，移动，倾斜和旋转变换
weixin_42463165的博客
06-27 4521
SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。#FormatImgID_0#SVG系列教程transform属性值tranform属性用来对一个元素声明一个或多个变...
纯CSS3卡通小黄狗动画特效
07-24
纯CSS3卡通小黄狗动画特效是一款纯css3绘制的黄色可爱小狗动画，摇着尾巴的狗动画特效。
CSS基础教程
weixin_33794672的博客
12-04 229
一、CSS的应用[翻译Htmldog]有三种方法应用CSS（一）、In-line 行内行内样式是在html标签里直接使用style属性 <!--ExampleSourceCode--><pstyle="color:red">text</p> 设定段落文字红色。但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免...
HTML DOG.The Best-Practice Guide to xHTML&CSS
10-15
HTML DOG.The Best-Practice Guide to xHTML&CSS.pdf
HTML Dog - Best-Practice Guide to XHTML and CSS
07-31
Griffiths - HTML Dog - Best-Practice Guide to XHTML and CSS (New Riders, 2007).pdf
跟随鼠标移动的小狗
m_0_1_0_1的博客
04-03 462
思路：鼠标移动事件：mousemove 由于是在页面中移动，所以给document注册事件。图片要移动距离，并且不会占用位置，使用决定定位即可。 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x坐标和y坐标作为图片的top和left值就可以移动图片。 注：千万不要忘记给lef和top加上px单位 若想实现鼠标在图片的居中对齐，分别用xy减去宽高的一半 <!DOCTYPE html> <html lang="en"> <head&g...
模拟鼠标移动并点击
03-01
在IT行业中，模拟鼠标移动和点击是一项常见的自动化测试和脚本编写任务，广泛应用于软件测试、游戏自动化、数据输入以及各种应用程序的自动化流程。这项技术允许程序员或测试工程师通过编程来控制鼠标的动作，比如...
加上css移动动画小狗
06-01
好的，我们可以在轮播图中添加一个小狗图片，并给它添加CSS移动动画。以下是具体的代码实现： 1. 在swiper-slide中添加小狗图片并设置样式 ```html (item, index) in swiperData" :key="index"> ...
java图像跟随鼠标移动_js实现鼠标左右移动，图片也跟着移动效果
weixin_35785909的博客
02-28 914
本文主要介绍了js实现鼠标左右移动，图片也跟着移动效果的方法与思路。具有很好的参考价值，下面跟着小编一起来看下吧效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值布局：大盒子里面是图片，大盒子position:relative；图片position:absolute;无标题文档bo...
HTML_Dog - HTML和CSS网页标准指南
05-22
此标准指南来自著名的国外XHTML和CSS的实用指南网站HTMLDog，经Neo翻译而成，由Lv_V整理制作CHM电子书。在本指南内，你不仅学到最常用的制做网页的技术，最重要的是，你还可以深入了解实用的、最新的Web标准（Web Standards）。<br><br>总共六个指南，基本上覆盖了HTML和CSS的范围。初级指南是按部就班的，你应该按顺序逐个学习。而中级和高级指南相对比较独立，包含各种技巧和技术，你可以按照你的需求选择性地学习。<br>
opengl绘制3D小狗，并通过键盘使其移动
05-16
要使用OpenGL绘制3D小狗并使其移动，您需要了解以下内容： 1. OpenGL基础知识，包括顶点缓冲对象（VBO）、着色器（Shader）和纹理（Texture）等。 2. 3D模型加载，您可以使用一些库来加载3D模型文件，如Assimp或者...
征集HTML Dog 中文书名 免费获取图书
华章IT官方博客
02-22 4874
 HTML Dog: The Best-Practice Guide to XHTML and CSS 征集HTML DOG一书中文版书名活动各位会员朋友，HTML Dog 一书即将由华章公司三月份出版，该书的封面是一条非常可爱的沙皮狗。书中的内容是基于月访问量达100万次的HTML Dog （http://www.htmldog.com），并作了相应的补充。由于本书的独特性，以致中文
CSS基础教程17篇 [翻译Htmldog]
u013680195的专栏
03-16 996
CSS基础教程17篇 此教程共17篇，由浅到深、循序渐进的讲述CSS知识。 对初学者有很大的学习价值，对已入门的朋友也有重要的参考价值。 1、CSS的应用 http://www.weby.com.cn/view.asp?id=13 2、CSS Selectors,Properties,and Values 选择器 、属性、值 http://www.52css.com/art
CSS的通配选择器
热门推荐
歪脖先生的博客
12-02 1万+
通配选择器 通配选择器用一个星号（*）表示。单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如，让页面上的所有文本都为黑色： * { color: black; } 当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时，通配选择器可以对特定元素的所有后代应用样式。如，以下代码为 .demo 元素的所有后代，添加一个灰色背景： .demo * { backg
HTML Dog
ph4nut的博客
11-18 354
介紹一本不錯的書 [img]http://dl.iteye.com/upload/attachment/169927/542ddcd6-9143-3da2-a9c5-031657d45b9c.png[/img]
前端 Flex 布局语法详解
最新发布
ning的博客
11-10 723
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Web前端第二次作业
nixiaoge的博客
11-05 396
作业要求：制作带有下拉悬停菜单的导航栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值