2

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

 1 year ago
source link: https://blog.51cto.com/u_15568258/6000415
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Table of Contents

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

1.1 资源获取和效果预览

1.效果预览：

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

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

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

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

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

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

1.背景加圆圈圈。

2.兔兔和提示字。

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

1.1 背景加圆圈圈

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

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

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

<section class="section">
    <h2 id="h0" 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，兔兔动态代码「兔了个兔」_3c_04

1.2.兔兔和提示字

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

<h2 id="h1" 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，兔兔动态代码「兔了个兔」_css_05

兔兔使用一个简单的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，兔兔动态代码「兔了个兔」_css_06

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，兔兔动态代码「兔了个兔」_3c_07

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK