0
0

「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）

在这里插入图片描述

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

💅文章概要：****各位C站的小伙伴们，你想要获得一款精美的可爱兔兔睡觉Loading页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！

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

目录

前言

在这里插入图片描述

  各位C站的小伙伴们，你想要获得一款精美的可爱兔兔睡觉Loading页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！

效果演示

  下面是效果图的演示：

EA6CFA136F05C5720C4FD2BD11AC143C.gif

实现思路

  看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，

直接前往最后的完整源码章节！

  分步讲解中我会先把全部HTML部分放出，以便大家对照来学习CSS的部分，在分步讲解中，

我只讲解CSS的部分

。
  完整源码放在了我的个人公众号中，关注公众号并且回复：

CSS可爱睡觉兔兔

便可获取完整源码！

  我将实现思路分成了如下

五个部分

，列举如下：

  • 背景的设置
  • 容器设置
  • 兔兔身体设计
  • 兔兔尾巴设计
  • 兔兔脸部设计
  • 兔兔耳朵设计
  • 兔兔眼睛设计
  • 兔兔嘴巴设计
  • 兔兔手臂设计
  • Loading加载设计

背景的设置

在这里插入图片描述

  通过使用HTML和CSS可以完成整个登录设计表单的背景，背景颜色采取了橘红色的设计，具有一种

高级感

和

亲切感

！

<!DOCTYPEhtml><htmllang="en"><head><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Rabbit Animation</title><!-- Stylesheet --><style>body{background-color: #e25a61;}</style></head><body><divclass="container"><divclass="tail"></div><spanclass="z-1">Z</span><spanclass="z-2">Z</span><spanclass="z-3">Z</span><divclass="rabbit-body"><divclass="face-container"><divclass="rabbit-face"><divclass="ear"></div><divclass="eye-l"></div><divclass="eye-r"></div><divclass="mouth"></div></div></div><divclass="leaf"></div><divclass="carrot"></div><divclass="hand-l"></div><divclass="hand-r"></div></div><divclass="shadow"></div></div></body></html>

容器设置

这些设置使得页面的样式更加统一，避免了不必要的布局问题。

  复制如下源码粘贴到

<style></style>

标签之间

*{padding: 0;margin: 0;box-sizing: border-box;}.container{height: 31em;width: 31em;position: absolute;transform:translate(-50%, -50%);top: 50%;left: 50%;}

  这段CSS代码中，首先是

通配符选择器

，用来指定所有元素，包括

文本

、

图像

、

表单元素

等，然后对它们应用一些共同的样式：

*

=，接下来是针对一个特定元素的样式，它的类名是 ：

container
  • padding: 0;消除元素内边距，即使元素的内容与边框之间没有任何间距；
  • margin: 0;消除元素外边距，即使元素与周围元素之间也没有任何间距；
  • box-sizing: border-box;这个属性是用来定义元素的盒子模型，它指定元素的宽度和高度包括内容区、内边距和边框的总和，而不是只包括内容区的大小。
  • height: 31em;和 分别指定容器的高度和宽度为 31em，这里使用 em 单位，相对于其父元素的字体大小来定义元素的大小;width: 31em;
  • position: absolute;把容器设置为绝对定位，这意味着它相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，它将相对于文档的初始包含块进行定位；
  • transform: translate(-50%, -50%);这个属性用于定位元素，将其水平和垂直方向上移动到父元素的中心。它使用百分比单位，表示相对于元素自身的宽度和高度，因此 表示元素的中心点需要向左移动其宽度的一半，向上移动其高度的一半；-50%
  • top: 50%;和 用来指定元素距离父元素顶部和左侧的距离，也是相对于父元素的百分比。left: 50%;

兔兔身体设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.rabbit-body{background-color: #d7dfe7;height: 8.12em;width: 15.62em;border-radius: 8.12em 8.12em 0 0;position: absolute;margin: auto;left: 0;right: 0;top: 11.25em;background:radial-gradient(
    circle at 0 50%,
    #b5becd,
    #b5becd 60%,
    #d7dfe7 61%
  );z-index: 1;}

  这段代码定义了 “

.rabbit-body”

类选择器的样式。具体分析如下：

  • background-color: #d7dfe7;定义了背景颜色为淡灰色。
  • height: 8.12em;和width: 15.62em; 分别定义了元素的高度和宽度。
  • border-radius: 8.12em 8.12em 0 0;定义了元素的四个角的圆角大小，前两个参数表示左右两侧的圆角大小，后两个参数表示上方没有圆角。
  • position: absolute;定义了元素的定位方式为绝对定位。
  • margin: auto;定义了元素的外边距为自动，即让浏览器自动计算外边距。
  • left: 0; right: 0;定义了元素左右两侧的位置为0，即水平居中。
  • top: 11.25em;定义了元素上方的位置为11.25em，即垂直方向上距离容器顶部11.25em的位置。
  • background: radial-gradient(...);定义了元素的背景颜色为径向渐变，从左侧圆形渐变到右侧淡灰色。
  • z-index: 1;定义了元素的层级为1，表示它在其他层级为0的元素之上。

兔兔尾巴设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.tail{position: absolute;background-color: #ffffff;height: 3.4em;width: 3.4em;border-radius: 50%;right: 5.93em;top: 15.93em;}

  这段代码定义了兔子的尾巴的样式，具体解析如下：

  • position: absolute;将元素的定位方式设置为绝对定位，相对于其最近的已定位祖先元素（如果没有已定位的祖先元素，则相对于文档的 body 元素）进行定位。
  • background-color: #ffffff;将元素的背景颜色设置为白色。
  • height: 3.4em;将元素的高度设置为 3.4em。
  • width: 3.4em;将元素的宽度设置为 3.4em。
  • border-radius: 50%;将元素的四个角都设置为 50% 的圆角，使元素呈现圆形。
  • right: 5.93em;将元素相对于其父元素的右侧边缘距离设置为 5.93em。
  • top: 15.93em;将元素相对于其父元素的顶部边缘距离设置为 15.93em。

兔兔脸部设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.face-container{transform:rotate(-10deg);transform-origin: 0 100%;animation: nod 5s ease-in-out infinite;}@keyframes nod{50%{transform:rotate(0deg);}}.rabbit-face{background-color: #d7dfe7;height: 5.93em;width: 9.3em;border-radius: 4.68em 4.68em 0 0;position: absolute;left: -1.25em;top: -1.87em;}.rabbit-face:before{position: absolute;content:"";background-color: #d7dfe7;width: 11.25em;height: 3.75em;left: -0.93em;top: 5.62em;border-radius: 4.37em;}

  这段代码定义了兔子的面部，包括面部的容器和一些细节。下面是对代码的逐行解析：

  • .face-container定义了面部的容器，用于包含面部的所有元素。
  • transform: rotate(-10deg);将容器旋转了10度，使得面部的位置稍微偏离了垂直方向。
  • transform-origin: 0 100%;定义了旋转的中心点在容器的左下角。
  • animation: nod 5s ease-in-out infinite;定义了一个名为的动画，让兔子的头部像在点头。nod@keyframes nod {50% {transform: rotate(0deg);}}定义了动画的关键帧，50%时将头部旋转至0度。
  • .rabbit-face定义了面部的形状，包括背景颜色、大小和圆角。
  • position: absolute;将面部的位置设为绝对定位，以便在容器内部定位。
  • left: -1.25em; top: -1.87em;将面部相对于容器左上角向左上方偏移了一定距离，使得眼睛、鼻子和嘴巴的位置恰好在面部容器的底部。
  • .rabbit-face:before定义了面部容器的下半部分，用于表示兔子的嘴巴。
  • position: absolute;将下半部分的位置设为绝对定位，以便在面部容器内部定位。
  • content: "";表示该元素没有实际内容，只是用于表示嘴巴的形状。
  • width: 11.25em; height: 3.75em;定义了下半部分的大小。
  • left: -0.93em; top: 5.62em;将下半部分相对于面部容器的左上角偏移了一定距离，使得嘴巴的位置位于容器的底部。
  • border-radius: 4.37em;定义了下半部分的圆角，使得嘴巴呈现出半圆形的形状。

兔兔耳朵设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.ear{background-color: #d7dfe7;height: 8.12em;width: 2.18em;position: relative;top: -4.06em;left: 0.31em;border-radius: 1.25em 1.25em 0 0;box-shadow: 6.56em 0 0 #d7dfe7;z-index: -1;}.ear:before{position: absolute;content:"";background-color: #cd92b4;height: 7.31em;width: 1.37em;top: 0.37em;left: 0.37em;border-radius: 1.56em;box-shadow: 6.56em 0 0 #cd92b4;}

  这段CSS代码定义了兔子的耳朵。下面是对代码的逐行分析：

  • .ear：选择器，用于选择兔子耳朵的元素。
  • background-color: #d7dfe7;：设置耳朵的背景颜色为淡蓝色。
  • height: 8.12em;：设置耳朵的高度为8.12em。
  • width: 2.18em;：设置耳朵的宽度为2.18em。
  • position: relative;：设置元素的定位方式为相对定位。
  • top: -4.06em;：设置元素相对于父元素向上偏移4.06em。
  • left: 0.31em;：设置元素相对于父元素向左偏移0.31em。
  • border-radius: 1.25em 1.25em 0 0;：设置元素的四个角的圆角大小。这里设置了左上角和右上角的圆角大小为1.25em，其余两个角的圆角大小为0。
  • box-shadow: 6.56em 0 0 #d7dfe7;：设置元素的阴影效果。这里设置了一个水平偏移为6.56em，其余两个偏移量为0，颜色为淡蓝色的阴影。
  • z-index: -1;：设置元素的层级为-1，使其在其他元素的下面。
  • .ear:before是一个伪元素选择器，它表示在元素之前添加一个元素，并对这个元素应用以下样式：.ear
  • position: absolute;：设置伪元素的定位方式为绝对定位。
  • content: "";：设置伪元素的内容为空。
  • background-color: #cd92b4;：设置伪元素的背景颜色为粉红色。
  • height: 7.31em;：设置伪元素的高度为7.31em。
  • width: 1.37em;：设置伪元素的宽度为1.37em。
  • left: 0.37em;：设置伪元素相对于父元素向左偏移0.37em。
  • border-radius: 1.56em;：设置伪元素的四个角的圆角大小为1.56em。
  • box-shadow: 6.56em 0 0 #cd92b4;：设置伪元素的阴影效果。这里设置了一个水平偏移为6.56em，其余两个偏移量为0，颜色为粉红色的阴影。

兔兔眼睛设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.eye-l,
.eye-r{position: absolute;height: 0.81em;width: 1.56em;background-color: #101010;border-radius: 0 0 1.87em 1.87em;top: 3.75em;}.eye-l{left: 1.56em;}.eye-r{right: 1.56em;}.eye-l:before,
.eye-r:before{content:"";position: absolute;background-color: #d7dfe7;height: 0.75em;width: 1.12em;border-radius: 0 0 0.9em 0.9em;left: 0.23em;bottom: 0.25em;}

兔兔嘴巴设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.mouth{background-color: #ffffff;position: absolute;height: 1.87em;width: 2.5em;border-radius: 50% 50% 50% 50%/ 30% 30% 70% 70%;margin: auto;left: 0;right: 0;top: 4.06em;}.mouth:before{position: absolute;content:"";height: 0.93em;width: 1.25em;border-radius: 50% 50% 50% 50%/ 30% 30% 70% 70%;margin: auto;left: 0;right: 0;background-color: #101010;}

  这部分代码定义了兔子的嘴巴。嘴巴是一个白色的圆形，其高度为1.87em，宽度为2.5em，具有50%的圆角半径。而且这个圆形的上部半径为30%，下部半径为70%。这使得嘴巴看起来像是一个

微笑

的形状。

  在嘴巴的中间，使用

：before

伪元素添加了一个黑色的小圆形，来表示兔子的嘴唇。这个小圆形的高度为0.93em，宽度为1.25em，具有50%的圆角半径，上部半径和下部半径的比例与嘴巴相同。

兔兔手臂设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.hand-l,
.hand-r{position: absolute;height: 2.5em;width: 5em;bottom: 0;border-radius: 0.93em 0.93em 0 0;}.hand-l{background-color: #b5becd;left: -3.12em;}.hand-r{background-color: #ffffff;left: 5em;}.hand-l:before,
.hand-r:before{position: absolute;content:"";height: 2em;width: 3.12em;bottom: 0;border-radius: 0.62em 0.62em 0 0;}.hand-l:before{background-color: #ffffff;right: -1.56em;}.hand-r:before{background-color: #b5becd;left: -1.56em;}

胡萝卜设计

在这里插入图片描述

  复制如下源码粘贴到

<style></style>

标签之间

.carrot{position: absolute;background-color: #e78f1d;width: 7.5em;height: 2.5em;border-radius: 25% 65% 65% 25%/ 50% 50% 50% 50%;left: -4.37em;bottom: 0.62em;transform:rotate(15deg);}.leaf,
.leaf:before{position: absolute;height: 2.5em;width: 2.5em;border-radius: 2.5em 0;}.leaf{background-color: #c9cf55;transform:rotate(-40deg);bottom: 2.5em;left: -5em;}.leaf:before{content:"";background-color: #9eb42e;transform:rotate(-80deg);bottom: 0;left: -1.25em;}

Loading加载设计

EA6CFA136F05C5720C4FD2BD11AC143C.gif

HTML源码

  复制如下源码粘贴到

</body>

标签上方

<divclass="loader"><div> L </div><div> O </div><div> A </div><div> D </div><div> I </div><div> N </div><div> G </div><div></div><div></div><div></div></div>

CSS源码

  复制如下源码粘贴到

<style></style>

标签之间

.container span{font-family:"Poppins", sans-serif;font-weight: 600;font-size: 2em;color: #4f1f22;position: absolute;transform:rotate(10deg);animation: snore 9s infinite linear forwards;}@keyframes snore{30%{transform:rotate(10deg)translateY(0);opacity: 1;}100%{transform:rotate(10deg)translateY(-7em);opacity: 0.2;}}.container .z-1{top: 5.5em;left: 4.5em;animation-delay: 7s;}.container .z-2{top: 7em;left: 3.5em;animation-delay: 1s;}.container .z-3{top: 5em;left: 6em;}.shadow{background-color: #d34b58;width: 25em;height: 0.5em;border-radius: 0.31em;position: absolute;margin: auto;left: 0;right: 0;top: 19.37em;}#loader-wrapper{background-image:linear-gradient(45deg,rgb(241, 70, 51),rgb(111, 142, 199));background-size: 400%;background-position: 0% 100%;animation: gradient 7.5s ease-in-out infinite;}#loader-wrapper{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;overflow: hidden;}#loader{display: flex;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;animation: spin 1.7s linear infinite;z-index: 11;}#loader:before{content:"";position: absolute;top: -15px;left: -15px;right: -15px;bottom: -15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;animation: spin-reverse .6s linear infinite;}#loader:after{content:"";position: absolute;top: -30px;left: -30px;right: -30px;bottom: -30px;border-radius: 50%;border: 3px solid transparent;border-top-color: #fff;animation: spin 1s linear infinite;}.loader{top: 76%;left: 50%;transform:translate(-50%, -50%);text-align: center;cursor: default;width: 100%;max-width: 990px;overflow: visible;z-index: 99;}.loader,
.loader div{position: absolute;height: 36px
}.loader div{width: 30px;margin: 0 20px;opacity: 0;animation: move 2s linear infinite;transform:rotate(180deg);color: #fff;font-size: 2em;}.loader div:nth-child(8):before{background: #ffffff;}.loader div:nth-child(8):before,
.loader div:nth-child(9):before{content:'';position: absolute;bottom: 0px;left: 0;width: 10px;height: 10px;border-radius: 100%;}.loader div:nth-child(9):before{background: #f2f2f2
}.loader div:nth-child(10):before{bottom: -15px;height: 10px;background: #ffffff;}.loader div:after,
.loader div:nth-child(10):before{content:'';position: absolute;left: 0;width: 10px;border-radius: 100%;}.loader div:after{bottom: -40px;height: 5px;background:rgba(255, 255, 255, .1);}.loader div:nth-child(2){animation-delay: .2s;}.loader div:nth-child(3){animation-delay: .4s;}.loader div:nth-child(4){animation-delay: .6s;}.loader div:nth-child(5){animation-delay: .8s;}.loader div:nth-child(6){animation-delay: 1s;}.loader div:nth-child(7){animation-delay: 1.2s;}.loader div:nth-child(8){animation-delay: 1.4s;}.loader div:nth-child(9){animation-delay: 1.6s;}.loader div:nth-child(10){animation-delay: 1.8s;}@keyframes move{0%{right: 0;opacity: 0
  }35%{right: 41%
  }35%,
  65%{transform:rotate(0);opacity: 1
  }65%{right: 59%
  }to{right: 100%;transform:rotate(-180deg)}}@media screen and(min-width: 700px){.container{font-size: 20px;}}

完整源码

在这里插入图片描述

  扫码关注

文章底部公众号

或者微信公众号搜索

ThundersArk

，发送关键字

可爱睡觉兔兔

即可完整获取打包源码。

写在最后的话

  本文花费大量时间介绍了

如何创建一个可爱睡觉兔兔Loading页面

，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，

你们的支持是我最大的动力！

在这里插入图片描述

✨

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

👍 

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

⭐️ 

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

✏️ 

      评论，你的意见是我进步的财富！
     
    
   
   
    \textcolor{98c091}{评论，你的意见是我进步的财富！}
   
  
 评论，你的意见是我进步的财富！
标签： css 前端 html
本文转载自: https://blog.csdn.net/weixin_59480481/article/details/129352764
版权归原作者 ThundersArk 所有， 如有侵权，请联系我们删除。
登录后发布评论

“「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航