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

Posted 2023-01-11

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

1.1 资源获取和效果预览

1.效果预览：

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

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

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

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

1.背景加圆圈圈。

2.兔兔和提示字。

1.1 背景加圆圈圈

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

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

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

<section class="section">
    <h2 class="section__title">上进小菜猪2023兔吉<br><br><br></h2>
</section>

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控制即可：

<h2 class="section__title">上进小菜猪2023兔吉<br><br><br></h2>

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，然后是耳朵，眼睛，头部，身体等等，如下：

<div class="rabit">
    <div class="ear"></div>
    <div class="innerear"></div>
    <div class="ear right"></div>
    <div class="innerear right"></div>
    <div class="eye"></div>
    <div class="eye right"></div>
    <div class="shy"></div>
    <div class="shy right"></div>
    <div class="mouth"></div>
    <div class="mouth right"></div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm"></div>
    <div class="arm right"></div>
    <div class="leg"></div>
    <div class="leg right"></div>
</div>

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++;

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