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

1.1 资源获取和效果预览

1.源码资源获取：

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

2.效果预览：

在这里插入图片描述

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

image-20230110145015866

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

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

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

1.背景加圆圈圈。

2.兔兔和提示字。

image-20230110145243954

1.1 背景加圆圈圈

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

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

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

1

2    
上进小菜猪2023兔吉



3

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

 1.section {
 2    display: flex;
 3    justify-content: center;
 4    align-items: center;
 5    position: relative;
 6    min-height: 100vh;
 7    background: linear-gradient(135deg, #111, #222, #111);
 8}
 9.section::before {
10    content: "";
11    position: absolute;
12    width: 30vw;
13    height: 30vw;
14    border: 5vw solid #ff1062;
15    border-radius: 50%;
16    box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
17}

效果图如下：

image-20230110150024171

1.2.兔兔和提示字

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

1
上进小菜猪2023兔吉

css控制：

 1.section .section__title span {
 2    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);
 3    font-weight: 700;
 4    font-size: 3em;
 5}
 6.section .section__title {
 7    position: absolute;
 8    transform: skewY(-7deg);
 9    z-index: 10;
10    color: #fff;
11    text-align: center;
12    font-size: 9vw;
13    line-height: 2em;
14    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);
15    animation: floating 5s ease-in-out infinite;
16    top: 20px;
17}

效果图如下：

image-20230110150001352

兔兔：

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

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

 1
 2    
 3    
 4    
 5    
 6    
 7    
 8    
 9    
10    
11    
12    
13    
14    
15    
16    
17    
18

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

image-20230110150234293

1.3 JavaScript控制动态

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

 1while (i < count) {
 2    const star = document.createElement('i');
 3    const x = Math.floor(Math.random() * window.innerWidth);
 4    const y = Math.floor(Math.random() * window.innerHeight);
 5    const size = Math.random() * 4;
 6    star.style.left = x + 'px';
 7    star.style.top = y + 'px';
 8    star.style.width = 1 + size + 'px';
 9    star.style.height = 1 + size + 'px';
10    const duration = Math.random() * 2;
11    star.style.animationDuration = 2 + duration + 's';
12    star.style.animationDelay = 2 + duration + 's';
13    section.appendChild(star);
14    i++;
15}

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

image-20230110150523936