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

时间:2023-01-10 19:00:36

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

1.1 资源获取和效果预览

1.效果预览:

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

2.如何打开:(电脑端,解压后双击index.html打开!)

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

二.代码讲解(主要代码)

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

观察下面的构成图,主要分为俩个部分:

1.背景加圆圈圈。

2.兔兔和提示字。

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

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

效果图如下:

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

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

效果图如下:

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

兔兔:

兔兔使用一个简单的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代码过于多,部分截图如下,需要全部源码的,请到文章开头处下载全部源码观看)。

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

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

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

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