文章目录

• 一.2023兔年大吉HTML，兔兔动态代码「兔了个兔」
• • 1.1 资源获取和效果预览
• 二.代码讲解（主要代码）
• • 1.1 背景加圆圈圈
  • 1.2.兔兔和提示字
  • 1.3 JavaScript控制动态

一.2023兔年大吉HTML，兔兔动态代码「兔了个兔」

1.1 资源获取和效果预览

1.源码资源获取：

https://download.csdn.net/download/weixin_52908342/87373550

快速点击下载通道：新年快乐代码,2023兔个吉祥源码.zip-文档类资源

2.效果预览：

3.如何打开：（电脑端，解压后双击index.html打开！）

二.代码讲解（主要代码）

需要完整源码请到文章开头处下载：

观察下面的构成图，主要分为俩个部分：

1.背景加圆圈圈。

2.兔兔和提示字。

1.1 背景加圆圈圈

这里我为了代码的简便性，直接使用了section标签。

section元素代表一个页面或一个内容块的部分，一般作为主题块列表，在html5\网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。

设置其class为section，下面css进行一个样式的控制：

上进小菜猪2023兔吉

css样式控制圆圈圈和背景图，部分代码如下：

.section {display: flex;justify-content: center;align-items: center;position: relative;min-height: 100vh;background: linear-gradient(135deg, #111, #222, #111);
}
.section::before {content: "";position: absolute;width: 30vw;height: 30vw;border: 5vw solid #ff1062;border-radius: 50%;box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
}

效果图如下：

1.2.兔兔和提示字

提示文字：上进小菜猪2023兔吉，这里可以设置一个class为section__title然后进行一个css控制即可：

上进小菜猪2023兔吉

css控制：

.section .section__title span {text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc, 9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);font-weight: 700;font-size: 3em;
}
.section .section__title {position: absolute;transform: skewY(-7deg);z-index: 10;color: #fff;text-align: center;font-size: 9vw;line-height: 2em;text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);animation: floating 5s ease-in-out infinite;top: 20px;
}

效果图如下：

兔兔：

兔兔使用一个简单的div盒子控制即可：

我们看下面的代码可以看到，我们先写一个大的盒子存放兔兔：rabit，然后是耳朵，眼睛，头部，身体等等，如下：

css代码如下：（css代码过于多，部分截图如下，需要全部源码的，请到文章开头处下载全部源码观看）。

1.3 JavaScript控制动态

我们可以看到在第一张图片，是动态的图片，文字会上下的浮动，其js部分代码如下：

while (i < count) {const star = document.createElement('i');const x = Math.floor(Math.random() * window.innerWidth);const y = Math.floor(Math.random() * window.innerHeight);const size = Math.random() * 4;star.style.left = x + 'px';star.style.top = y + 'px';star.style.width = 1 + size + 'px';star.style.height = 1 + size + 'px';const duration = Math.random() * 2;star.style.animationDuration = 2 + duration + 's';star.style.animationDelay = 2 + duration + 's';section.appendChild(star);i++;
}

需要全部源码的，请到文章开头处跳转下载全部源码。