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

　　一。2023兔年大吉HTML，兔兔动态代码兔了个兔1。1资源获取和效果预览
　　1。源码资源获取：
　　https：download。csdn。netdownloadweixin5290834287373550
　　2。效果预览：
　　在这里插入图片描述
　　3。如何打开：（电脑端，解压后双击index。html打开！）
　　image20230110145015866二。代码讲解（主要代码）
　　需要完整源码请到文章开头处下载：
　　观察下面的构成图，主要分为俩个部分：
　　1。背景加圆圈圈。
　　2。兔兔和提示字。
　　image202301101452439541。1背景加圆圈圈
　　这里我为了代码的简便性，直接使用了section标签。
　　section元素代表一个页面或一个内容块的部分，一般作为主题块列表，在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。
　　设置其class为section，下面css进行一个样式的控制：1sectionclasssection2h2classsectiontitle上进小菜猪2023兔吉
　　h23section
　　css样式控制圆圈圈和背景图，部分代码如下：1。section｛2display：3justifycontent：4alignitems：5position：6minheight：1007background：lineargradient（135deg，111，222，111）；8｝9。section：：before｛10content：；11position：12width：3013height：3014border：5vwsolidff1062；15borderradius：50；16boxshadow：0001vw222，0001。317｝
　　效果图如下：
　　image202301101500241711。2。兔兔和提示字
　　提示文字：上进小菜猪2023兔吉，这里可以设置一个class为sectiontitle然后进行一个css控制即可：1h2classsectiontitle上进小菜猪2023兔吉
　　h2
　　css控制：1。section。sectiontitlespan｛2textshadow：1px1px0ccc，2px2px0ccc，3px3px0ccc，4px4px0ccc，5px5px0ccc，6px6px0ccc，7px7px0ccc，8px8px0ccc，9px9px0ccc，20px20px0rgba（0，0，0，0。2）；3fontweight：700；4fontsize：35｝6。section。sectiontitle｛7position：8transform：skewY（7deg）；9zindex：10；10color：11textalign：12fontsize：913lineheight：214textshadow：1px1px0ccc，2px2px0ccc，3px3px0ccc，4px4px0ccc，5px5px0ccc，10px10px0rgba（0，0，0，0。2）；15animation：floating516top：2017｝
　　效果图如下：
　　image20230110150001352
　　兔兔：
　　兔兔使用一个简单的p盒子控制即可：
　　我们看下面的代码可以看到，我们先写一个大的盒子存放兔兔：rabit，然后是耳朵，眼睛，头部，身体等等，如下：123456789101112131415161718
　　css代码如下：（css代码过于多，部分截图如下，需要全部源码的，请到文章开头处下载全部源码观看）。
　　image202301101502342931。3JavaScript控制动态
　　我们可以看到在第一张图片，是动态的图片，文字会上下的浮动，其js部分代码如下：1while（icount）｛2conststardocument。createElement（i）；3constxMath。floor（Math。random（）window。innerWidth）；4constyMath。floor（Math。random（）window。innerHeight）；5constsizeMath。random（）4；6star。style。7star。style。8star。style。width19star。style。height110constdurationMath。random（）2；11star。style。animationDuration212star。style。animationDelay213section。appendChild（star）；14i；15｝
　　需要全部源码的，请到文章开头处跳转下载全部源码。
　　image20230110150523936