「兔了个兔」福兔贺春，纯CSS实现超精美月兔404界面（附源码）

news2024/10/5 16:23:11

D6AFDA81F8E0537C7F4BAE1226A86622.gif

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀，兔年吉祥，预祝大家来年财源滚滚来！今天给大家带来的分享是一款超精美的月兔404前端界面，希望大家能喜欢！

🤟每日一言： 你可以遗憾，但是你绝对不能后悔。遗憾证明你努力过了，只是力有不逮。而后悔，只能说明你当时没努力过。

目录

  • 前言
  • 效果演示
  • 实现思路
    •   背景设计
      •    HTML代码
      •    CSS代码
    •   404月球设计
      •    HTML代码
      •    CSS代码
    •   蹦跳的月兔设计
      •    HTML代码
      •    CSS代码
  • 完整源码
  • 写在最后的话

前言

在这里插入图片描述

各位小伙伴们大家好呀，兔年吉祥，预祝大家来年财源滚滚来！今天给大家带来的分享是一款超精美的月兔404前端界面，希望大家能喜欢！

效果演示

D6AFDA81F8E0537C7F4BAE1226A86622.gif

实现思路

  看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节！在分步讲解中我会将HTML，CSS两个部分全部放在同一个文件中，方便各位小伙伴们获取!

  我将实现思路分成了如下三个部分，列举如下：

  • 背景设计
  • 404月球设计
  • 蹦跳的月兔设计

  背景设计

image.png

  背景的设计为月球空间的感觉，十分的恢弘大气和广阔无垠。它的实现主要用到了CSS中的一个函数：radial-gradient（）

radial-gradient（） 函数用径向渐变创建 “图像”。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

   HTML代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>rabbit 404</title>
<style>
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="figure">

</div>
<!-- partial -->
  
</body>
</html>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

*, *:after, *:before {
  box-sizing: border-box;
}

html {
  background: #23508a;
  background: radial-gradient(ellipse at center, #23508a 0%, #1b3b62 50%, #1a365b 100%);
  font-family: arial;
  min-width: 400px;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, rgba(115, 133, 154, 0.5) 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%);
  background-size: 250px 250px , 100px 100px , 60px 60px;
  background-repeat: repeat;
}

.figure {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -65%);
          transform: translate(-50%, -65%);
}

  404月球设计

0575099E6AE87676C31A8AB34590A0D5.gif

  月球的设计由HTML和CSS完成，而旋转部分的实现则由CSS中的一个重要组件@keyframes来实现

  • 使用@keyframes规则，你可以创建动画。
  • 创建动画是通过逐步改变从一个CSS样式设定到另一个。
  • 在动画过程中，您可以更改CSS样式的设定多次。
  • 指定的变化时发生时使用%，或关键字“from”和“to”，这是和0%到100%相同。
@keyframes animationname {keyframes-selector {css-styles;}}

|值| 说明 |

   HTML代码

   将下面代码复制粘贴至<div class="figure"></div>之间

 <div class="mj">
 </div>
  <div class="error-no"> <span>4</span>
    <div class="moon"></div><span>4</span>
  </div>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

.error-no {
  font-size: 200px;
  font-weight: bold;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  color: #68e3e9;
  text-shadow: -2px 4px 2px rgba(0, 0, 0, 0.5);
}

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  display: inline-block;
  z-index: 10;
  overflow: hidden;
  box-shadow: -20px 0 20px #e9e9e9 inset;
  border: 1px solid #68e3e9;
}
.moon:after {
  content: '';
  position: absolute;
  left: 75px;
  top: 70%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #e9e9e9;
  background: currentcolor;
  -webkit-animation: 5s spin linear infinite;
          animation: 5s spin linear infinite;
  box-shadow: -30px -50px 0 20px, 50px -30px 0 -8px , 50px -90px 0 2px ,  100px -90px 0 0px,  100px -40px 0 25px, 150px -15px 0 0px,  240px 15px 0 4px, 230px -80px 0 2px,   200px -20px 0 16px, 350px  0 0, 320px -50px 0 20px, 400px -30px 0 -8px, 400px -90px 0 2px;
}

.mj {
  position: relative;
  margin: auto;
  z-index: 30;
  width: 60px;
  -webkit-transform: scale(0.6) translatey(70%);
          transform: scale(0.6) translatey(70%);
}


@-webkit-keyframes spin {
  0% {
    left: 75px;
  }
  100% {
    left: -275px;
  }
}

@keyframes spin {
  0% {
    left: 75px;
  }
  100% {
    left: -275px;
  }
}

  蹦跳的月兔设计

  月兔的设计比较复杂，在这里不展开讲了，后续会单独出一期文章来讲解跳动月兔的实现，还望大家多多关注专栏，不要错过精彩内容噢！

D6AFDA81F8E0537C7F4BAE1226A86622.gif

   HTML代码

   将下面代码复制粘贴至<div class="mj"></div>之间

<div class='rabbit'></div>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

.rabbit {
  width: 5em;
  height: 3em;
  background: #ffffff;
  border-radius: 70% 90% 60% 50%;
  position: relative;
  -moz-transform: rotate(0deg) translate(-2em, 0);
  -ms-transform: rotate(0deg) translate(-2em, 0);
  -webkit-transform: rotate(0deg) translate(-2em, 0);
  transform: rotate(0deg) translate(-2em, 0);
  animation: hop 1s infinite linear;
  z-index: 1;
}
.no-flexbox .rabbit {
  margin: 10em auto 0;
}
.rabbit:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 100%;
  top: 0.5em;
  left: -0.3em;
  box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;
  animation: kick 1s infinite linear;
}
.rabbit:after {
  content: "";
  position: absolute;
  width: .75em;
  height: 2em;
  background: white;
  border-radius: 50% 100% 0 0;
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  right: 1em;
  top: -1em;
  border-top: 1px solid #f7f5f4;
  border-left: 1px solid #f7f5f4;
  box-shadow: -0.5em 0em 0 -0.1em white;
}

@keyframes hop {
  20% {
    -moz-transform: rotate(-10deg) translate(1em, -2em);
    -ms-transform: rotate(-10deg) translate(1em, -2em);
    -webkit-transform: rotate(-10deg) translate(1em, -2em);
    transform: rotate(-10deg) translate(1em, -2em);
    box-shadow: -0.2em 3em 0 -1em #fff;
  }
  40% {
    -moz-transform: rotate(10deg) translate(3em, -4em);
    -ms-transform: rotate(10deg) translate(3em, -4em);
    -webkit-transform: rotate(10deg) translate(3em, -4em);
    transform: rotate(10deg) translate(3em, -4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #fff;
  }
  60%,75% {
    -moz-transform: rotate(0) translate(4em, 0);
    -ms-transform: rotate(0) translate(4em, 0);
    -webkit-transform: rotate(0) translate(4em, 0);
    transform: rotate(0) translate(4em, 0);
    box-shadow: -0.2em 1em 0 -0.75em #fff;
  }
}

@keyframes kick {
  20%,50% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white;
  }
}

完整源码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>rabbit 404</title>
  <style>
  *, *:after, *:before {
  box-sizing: border-box;
}

html {
  background: #23508a;
  background: radial-gradient(ellipse at center, #23508a 0%, #1b3b62 50%, #1a365b 100%);
  font-family: arial;
  min-width: 400px;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, rgba(115, 133, 154, 0.5) 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%);
  background-size: 250px 250px , 100px 100px , 60px 60px;
  background-repeat: repeat;
}

.figure {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -65%);
          transform: translate(-50%, -65%);
}

.error-no {
  font-size: 200px;
  font-weight: bold;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  color: #68e3e9;
  text-shadow: -2px 4px 2px rgba(0, 0, 0, 0.5);
}

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  display: inline-block;
  z-index: 10;
  overflow: hidden;
  box-shadow: -20px 0 20px #e9e9e9 inset;
  border: 1px solid #68e3e9;
}
.moon:after {
  content: '';
  position: absolute;
  left: 75px;
  top: 70%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #e9e9e9;
  background: currentcolor;
  -webkit-animation: 5s spin linear infinite;
          animation: 5s spin linear infinite;
  box-shadow: -30px -50px 0 20px, 50px -30px 0 -8px , 50px -90px 0 2px ,  100px -90px 0 0px,  100px -40px 0 25px, 150px -15px 0 0px,  240px 15px 0 4px, 230px -80px 0 2px,   200px -20px 0 16px, 350px  0 0, 320px -50px 0 20px, 400px -30px 0 -8px, 400px -90px 0 2px;
}

.mj {
  position: relative;
  margin: auto;
  z-index: 30;
  width: 60px;
  -webkit-transform: scale(0.6) translatey(70%);
          transform: scale(0.6) translatey(70%);
}


@-webkit-keyframes spin {
  0% {
    left: 75px;
  }
  100% {
    left: -275px;
  }
}

@keyframes spin {
  0% {
    left: 75px;
  }
  100% {
    left: -275px;
  }
}

.rabbit {
  width: 5em;
  height: 3em;
  background: #ffffff;
  border-radius: 70% 90% 60% 50%;
  position: relative;
  -moz-transform: rotate(0deg) translate(-2em, 0);
  -ms-transform: rotate(0deg) translate(-2em, 0);
  -webkit-transform: rotate(0deg) translate(-2em, 0);
  transform: rotate(0deg) translate(-2em, 0);
  animation: hop 1s infinite linear;
  z-index: 1;
}
.no-flexbox .rabbit {
  margin: 10em auto 0;
}
.rabbit:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 100%;
  top: 0.5em;
  left: -0.3em;
  box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;
  animation: kick 1s infinite linear;
}
.rabbit:after {
  content: "";
  position: absolute;
  width: .75em;
  height: 2em;
  background: white;
  border-radius: 50% 100% 0 0;
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  right: 1em;
  top: -1em;
  border-top: 1px solid #f7f5f4;
  border-left: 1px solid #f7f5f4;
  box-shadow: -0.5em 0em 0 -0.1em white;
}

@keyframes hop {
  20% {
    -moz-transform: rotate(-10deg) translate(1em, -2em);
    -ms-transform: rotate(-10deg) translate(1em, -2em);
    -webkit-transform: rotate(-10deg) translate(1em, -2em);
    transform: rotate(-10deg) translate(1em, -2em);
    box-shadow: -0.2em 3em 0 -1em #fff;
  }
  40% {
    -moz-transform: rotate(10deg) translate(3em, -4em);
    -ms-transform: rotate(10deg) translate(3em, -4em);
    -webkit-transform: rotate(10deg) translate(3em, -4em);
    transform: rotate(10deg) translate(3em, -4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #fff;
  }
  60%,75% {
    -moz-transform: rotate(0) translate(4em, 0);
    -ms-transform: rotate(0) translate(4em, 0);
    -webkit-transform: rotate(0) translate(4em, 0);
    transform: rotate(0) translate(4em, 0);
    box-shadow: -0.2em 1em 0 -0.75em #fff;
  }
}

@keyframes kick {
  20%,50% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white;
  }
}
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="figure">
  <div class="mj">
    <div class='rabbit'></div> 
  </div>
  <div class="error-no"> <span>4</span>
    <div class="moon"></div><span>4</span>
  </div>
</div>
<!-- partial -->
  
</body>
</html>

写在最后的话

  本文介绍了一款纯CSS实现的超精美月兔404界面！希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！ \textcolor{9c81c1}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{ed7976}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{98c091}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/185547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

搭建一个FAQ智能问答系统/服务

搭建一个FAQ智能问答系统/服务

FAQ智能问答系统 介绍 项目传送门&#xff1a;https://github.com/wzzzd/FAQ_system 构建了一个FAQ智能问答系统。 使用多种方法&#xff0c;实现FAQ的问题-模板匹配功能。 使用Tornado框架&#xff0c;部署成轻量级的Web服务应用。 整体框架如下。 流程 1.初始化流程 1.…
阅读更多...
这福利给你要不要 — 用Python采集相亲网站女生数据

这福利给你要不要 — 用Python采集相亲网站女生数据

前言 俗话说学咱这行的男同志 找对象容易吗 这马上就要过完年了 是时候找找女朋友了 我在这里摸索到了个网站 或许你们可以来看看 送一波单身福利 不需要的也可以学学怎么采集这些数据呗 环境与模块 环境开发 Python 3.8Pycharm 模块使用 import parsel --> p…
阅读更多...
类与对象的原理

类与对象的原理

前言 在JavaScript中&#xff0c;类的实现是基于原型继承机制的。 JavaScript中的类的一个重要特性是“动态可继承”。 类与原型 在JavaScript中&#xff0c;类的所有实例对象都从同一个原型对象上继承属性&#xff0c;因此原型对象是类的核心。 所有的类都有一个共同的根…
阅读更多...
关系数据库——关系操作和关系完整性

关系数据库——关系操作和关系完整性

文章目录一、关系操作1.基本的关系操作2.关系数据语言的分类关系代数语言关系演算语言具有关系代数和关系演算双重特点的语言二、关系的完整性1.实体完整性(Entity Integrity)实体完整性规则2.参照完整性(Referential Integrity)参照完整性规则引用关系3.用户定义的完整性(User…
阅读更多...
WebRTC 的连接过程

WebRTC 的连接过程

经过前面几部分的铺垫&#xff0c;你应该对P2P音视频互动的过程有了一个大概的了解&#xff0c;有可能你会觉得过程比较繁琐&#xff0c;甚至涉及到了网络底层。但是&#xff0c;不要担心&#xff0c;WebRTC已经帮我们做了很多的事情&#xff0c;让我们在音视频开发时变得轻而易…
阅读更多...
【Spring源码】22. 属性填充populateBean()详解

【Spring源码】22. 属性填充populateBean()详解

进入populateBean()对bean的属性进行填充&#xff0c;将各个属性值注入&#xff08;存在其他bean的属性&#xff0c;则会递归初始化依赖的bean&#xff09;一开始会先对传入的参数进行判断&#xff08;如下图红框框中的逻辑&#xff09;如果传入的BeanWrapper和RootBeanDefinit…
阅读更多...
SpringBoot3+最新MybatisPlus+Mysql与TDengine双数据源

SpringBoot3+最新MybatisPlus+Mysql与TDengine双数据源

前言 昨天写的ideaApifox uploader插件apifox新年第一天上班就上榜了&#xff0c;真是不错。今天来补一篇&#xff0c;本来应该是在前一篇之前发的。实际上就是最新的springBoot集成最新的mybatisPlus&#xff0c;加双数据源&#xff1a;mysql、TDengine&#xff0c;一个关系型…
阅读更多...
kvm虚拟机克隆

kvm虚拟机克隆

kvm虚拟机克隆链接克隆和完整克隆的区别完整克隆自动克隆手动克隆的步骤1.复制模板vm磁盘为新vm的磁盘2.复制模板vm配置文件为新vm的配置文件3.修改新vm配置文件中的信息为新vm的信息4.导入新vm的配置文件5.启动新vm链接克隆1.生成链接克隆虚拟机磁盘文件2.后续流程与手动克隆一…
阅读更多...
【算法练习】链表中环的入口结点

【算法练习】链表中环的入口结点

题源&#xff1a;牛客描述给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。数据范围&#xff1a;n≤10000&#xff0c;1<结点值<10000要求&#xff1a;空间复杂度 O(1)&#xff0c;时间复杂度O(…
阅读更多...
1、数据库概述

1、数据库概述

文章目录1 为什么要使用数据库2 数据库与数据库管理系统2.1 数据库的相关概念2.2 数据库与数据库管理系统的关系2.3 常见的数据库管理系统排名(DBMS)2.4 常见的数据库介绍3 MySQL介绍3.1 概述3.2 MySQL发展史重大事件3.3 关于MySQL 8.03.4 为什么选择MySQL3.5 Oracle vs MySQL4…
阅读更多...
学成在线项目开发技巧整理---第二部分

学成在线项目开发技巧整理---第二部分

1.静态资源处理通常项目会采用动静分离架构,利用Nginx作为静态资源服务器,存放所有静态资源:#访问动态资源时,将请求负载均衡到多个服务器实例或者多个网关实例 upstream webservice{server 192.168.200.146:8080; }server {listen 80;server_name localhost;#动态资源l…
阅读更多...
C++基础知识点整理笔记（一）

C++基础知识点整理笔记（一）

一直想尝试自己动手构建一个简单的深度学习训练框架&#xff0c;包括数据读取与处理、PS、NN前后向传播、模型save和load、不同训练方式&#xff08;offline/online .etc&#xff09;、指标监控、模型部署等部分, 去深入研究内部深度学习训练框架及horovod、byteps、pslite、te…
阅读更多...
深刻理解状态机设计需要避免的冒险；时序电路可能存在essential hazard；处理单元里的control和datapath；竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险；时序电路可能存在essential hazard；处理单元里的control和datapath；竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险&#xff1b;时序电路可能存在essential hazard&#xff1b;处理单元里的control和datapath&#xff1b;竞争冒险【SV】【VLSI】0. 前言&#xff1a;时序电路可能存在essential hazard1. 理解control和datapath1.1 Datapath control2. 硬件电路…
阅读更多...
MFC|创建一个对话框及窗体各个属性介绍

MFC|创建一个对话框及窗体各个属性介绍

参考&#xff1a; VS2015 建立一个C的MFC简易窗体程序项目&#xff08;https://www.cnblogs.com/xingboy/p/11059721.html&#xff09; 对话框中各项属性介绍&#xff08;https://blog.csdn.net/u012350993/article/details/26093051&#xff09; MFC窗口风格 WS_style/WS_EX_s…
阅读更多...
【Hadoop】YARN简述

【Hadoop】YARN简述

文章目录1. YARN总述2. YARN调度器2.1 FIFO Scheduler2.2 Capacity Scheduler2.3 Fair Scheduler1. YARN总述 YARN是Hadoop资源管理器&#xff0c;它是一个通用资源管理系统&#xff0c;可为上层应用提供统一的资源管理和调度&#xff0c;它的引入为集群在利用率、资源统一管理…
阅读更多...
关于栈和队列

关于栈和队列

目录栈&#xff08;Stack&#xff09;什么是栈栈的使用栈的模拟实现队列&#xff08;Queue&#xff09;什么是队列队列的使用队列的模拟实现循环队列双端队列 (Deque)栈&#xff08;Stack&#xff09; 什么是栈 栈是一种特殊的线性表&#xff0c;它只允许在固定的一端进行插入…
阅读更多...
JavaScriptArray和String对象~

JavaScriptArray和String对象~

初识Array&#xff1a; 定义&#xff1a; 方式1 var 变量名new Array(元素列表);举例&#xff1a; <script>var arraynew Array(1,2,3);alert(array); </script>显示如下&#xff1a; 方式2 var 变量名[元素列表];举例&#xff1a; <script>var array[…
阅读更多...
App Inspector使用 （macaca移动端元素检查器）

App Inspector使用 （macaca移动端元素检查器）

App Inspector安装说明&#xff1a;https://macacajs.github.io/app-inspector/zh/guide/install.html#%E7%8E%AF%E5%A2%83%E9%9C%80%E8%A6%81 依赖安装说明&#xff1a; 1、node环境&#xff1a;这里安装的时候和初始化的时候报错使用了两个版本&#xff0c;所以这里使用nvm…
阅读更多...
Python-模块、包和发布模块

Python-模块、包和发布模块

1.模块1.1模块的概念模块是python程序架构的一个核心概念每一个以扩展名.py结尾的python源代码文件都是一个模块模块名同样也是一个标识符&#xff0c;需要符合标识符的命名规则在模块中定义的全局变量、函数、类都是提供给外界直接使用的工具模块就好比工具包&#xff0c;要想…
阅读更多...
世界坐标系-＞相机坐标系详细推导

世界坐标系-＞相机坐标系详细推导

基变换 理论部分 在n维的线性空间中&#xff0c;任意n个线性无关的向量都可以作为线性空间的基&#xff0c;即空间基不唯一。对于不同的基&#xff0c;同一个向量的坐标一般是不同的。因为在计算机图形学中&#xff0c;主要研究三维的空间&#xff0c;所以可以简化问题倒三维…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023