六一特效~ 你也是大小孩

不念不忘少年蓝@ 2024-04-20 12:23 70阅读 0赞

## 前言 ##

**啊？ 今天是六一了，过得真的快，我已经是大孩子了… 而小学及以下的孩子正在快乐的玩耍，我们大学生却已经看淡风云好吧~  
而对于马上要高考的学子来说，进入六月份不知道是如何的心情，不管怎么说，六一快乐！ 高考胜利！**  
![在这里插入图片描述][98fab21060914bd382ae7d73e85c6402.gif]

**今天要分享一个好玩的前端页面特效，也是为庆祝六一这个美好的节日。话不多说，直接代码快乐~**  
先展示层级关系  
![在这里插入图片描述][558023db6c764d4088d3d5c50e2a033c.png]

> html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>它想飞出去 快帮帮它 稳住哦 </title>
    	<script>
    		function jump() {
        
    			window.location.href = "open.html";
    		};
    	</script>
    	<link rel="stylesheet" href="css/flystyle.css">
    
    </head>
    
    <body>
    
    	<div class="container">
    		<div class="jar">
    			<div class="wording help">HELP!</div>
    			<div class="wording thanks" onclick="javascrtpt:jump()">六一节日快乐~<br>
    				送你份礼物<br>
    				:) 点我?</div>
    			<div class="jartop"></div>
    			<div class="jarlid"></div>
    			<div class="firefly">
    				<div class="body">
    					<div class="bodybottom"></div>
    				</div>
    				<div class="wing wing-left"></div>
    				<div class="wing wing-right"></div>
    				<div class="head"></div>
    			</div>
    		</div>
    	</div>
    
    </body>
    
    </html>

`这个是展示index首页的，里面有一只萤火虫被撞倒瓶子...，寓意这抓住希望吧.....`  
![在这里插入图片描述][7bb7185ad9fc497b82cbe936378c785d.png]  
`而当我们把鼠标放到进入瓶子的边界的时候，就发出闪~耀的光芒，真的是亮飞好吧。 这里属于鼠标的滑入划出而触发事件...`  
![在这里插入图片描述][a262cb6ef1b64df2b5bedafb2a4daf68.png]**然后不断抖瓶，直到飞出，这里做了一个动画实现效果，Y坐标变化**  
![在这里插入图片描述][007d63df18e84f9c9567c611f1181a1d.png]

`当我点击所指的时候，就页面跳转，这时就画面变化`

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>拆六一礼物喽~</title>
      <bgsound src="音乐.mp3" autostart=true loop=infinite>
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    
        <link rel="stylesheet" href="css/txtstyle.css">
    
    
    </head>
    
    <body bgcolor="azure" style="margin: 0;overflow: hidden;">
      <script src='js/three.min.js'></script>
      <script src="js/script.js"></script>
      <h1 class="playful" aria-label="儿童节快乐">
        <span aria-hidden="true">儿</span>
        <span aria-hidden="true">童</span>
        <span aria-hidden="true">节</span>
        <span aria-hidden="true">快</span>
        <span aria-hidden="true">乐</span>
      </h1>
      
      <script type="text/javascript" src="js/snow.src.js"></script>
    
    </body>
    
    </html>

`感觉真的很快乐儿童好吧`  
![在这里插入图片描述][1695a70d883f4dbc8079c7c84db12b64.png]  
`开始拆盒子，然后起飞~`  
![在这里插入图片描述][99482659ae61466da214d2276a8c8caa.png]

> css

.playful span {
        
      position: relative;
      color: #5362F6;
      text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
      animation: scatter 1.75s infinite;
    }
    
    .playful span:nth-child(2n) {
        
      color: #ED625C;
      text-shadow: 0.25px 0.25px #F2A063, 0.5px 0.5px #F2A063, 0.75px 0.75px #F2A063, 1px 1px #F2A063, 1.25px 1.25px #F2A063, 1.5px 1.5px #F2A063, 1.75px 1.75px #F2A063, 2px 2px #F2A063, 2.25px 2.25px #F2A063, 2.5px 2.5px #F2A063, 2.75px 2.75px #F2A063, 3px 3px #F2A063, 3.25px 3.25px #F2A063, 3.5px 3.5px #F2A063, 3.75px 3.75px #F2A063, 4px 4px #F2A063, 4.25px 4.25px #F2A063, 4.5px 4.5px #F2A063, 4.75px 4.75px #F2A063, 5px 5px #F2A063, 5.25px 5.25px #F2A063, 5.5px 5.5px #F2A063, 5.75px 5.75px #F2A063, 6px 6px #F2A063;
      animation-delay: 0.3s;
    }
    
    .playful span:nth-child(3n) {
        
      color: #FFD913;
      text-shadow: 0.25px 0.25px #6EC0A9, 0.5px 0.5px #6EC0A9, 0.75px 0.75px #6EC0A9, 1px 1px #6EC0A9, 1.25px 1.25px #6EC0A9, 1.5px 1.5px #6EC0A9, 1.75px 1.75px #6EC0A9, 2px 2px #6EC0A9, 2.25px 2.25px #6EC0A9, 2.5px 2.5px #6EC0A9, 2.75px 2.75px #6EC0A9, 3px 3px #6EC0A9, 3.25px 3.25px #6EC0A9, 3.5px 3.5px #6EC0A9, 3.75px 3.75px #6EC0A9, 4px 4px #6EC0A9, 4.25px 4.25px #6EC0A9, 4.5px 4.5px #6EC0A9, 4.75px 4.75px #6EC0A9, 5px 5px #6EC0A9, 5.25px 5.25px #6EC0A9, 5.5px 5.5px #6EC0A9, 5.75px 5.75px #6EC0A9, 6px 6px #6EC0A9;
      animation-delay: 0.15s;
    }
    
    .playful span:nth-child(5n) {
        
      color: #555BFF;
      text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
      animation-delay: 0.4s;
    }
    
    .playful span:nth-child(7n), .playful span:nth-child(11n) {
        
      color: #FF9C55;
      text-shadow: 0.25px 0.25px #FF5555, 0.5px 0.5px #FF5555, 0.75px 0.75px #FF5555, 1px 1px #FF5555, 1.25px 1.25px #FF5555, 1.5px 1.5px #FF5555, 1.75px 1.75px #FF5555, 2px 2px #FF5555, 2.25px 2.25px #FF5555, 2.5px 2.5px #FF5555, 2.75px 2.75px #FF5555, 3px 3px #FF5555, 3.25px 3.25px #FF5555, 3.5px 3.5px #FF5555, 3.75px 3.75px #FF5555, 4px 4px #FF5555, 4.25px 4.25px #FF5555, 4.5px 4.5px #FF5555, 4.75px 4.75px #FF5555, 5px 5px #FF5555, 5.25px 5.25px #FF5555, 5.5px 5.5px #FF5555, 5.75px 5.75px #FF5555, 6px 6px #FF5555;
      animation-delay: 0.25s;
    }
    
    @keyframes scatter {
        
      0% {
        
        top: 0;
      }
      50% {
        
        top: -10px;
      }
      100% {
        
        top: 0;
      }
    }
    
    
    h1 {
        
    	position: absolute;
      font-size: 65px;
      text-transform: uppercase;
      font-family: "Archivo Black", "Archivo", sans-serif;
      font-weight: normal;
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 90px;
      height: auto;
      text-align: center;
      margin: 10rem auto;
      margin: calc(50vh - 5rem) auto;
      margin-top: 100px;
      margin-left: auto;
    }
    .txt{
        
    	margin-left: auto;
    }

`额， 由于代码量较多，我这里就不全部展示，我把连接放在下面了，要用的话就自取。六一快乐！`  
**[六一快乐炫酷起飞][Link 1]**

> 结尾

六一，也可以让我们一起来认识这些小小程序员，看他们用童趣和想象力，coding出一个与众不同的童年。

*  8岁的Daniel：DIY机器人，还想用编程和外星人交流  
    他喜欢编程，从Scratch学到python，自己做过自动搬运垃圾的智能机械臂，还有一个可以和他聊天的对话机器人，因为编程，学习成绩也蹭蹭往上涨。
 *  8岁的Ken：我想要发明很好玩的游戏，然后变有钱  
    一次朋友去他家做编程作业，作业是利用编程实现一个动画场景：孙小弟在树林中吃到一个水果，发现水果有毒，整个人都变成了蓝色。然后孙小弟说，啊，有毒！Ken看完觉得非常好玩，就对编程产生了兴趣，开始自己的编程学习之路。
 *  小学生禹辰：组装服务器芯片，破解代码密室，so easy  
    过去不久的华为开发者大会上，出现了一位年纪最小的神秘参会者。在大会上，，他不仅独立完成了华为云社区技术闯关活动“代码密室”的三层代码破解，还成功组装了鲲鹏服务器芯片，真是英雄出少年！

[98fab21060914bd382ae7d73e85c6402.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d20c90acc04c47398e06c4c155d050c4.gif
[558023db6c764d4088d3d5c50e2a033c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/070fe002a1ec49849b6bbbaedd3d8632.png
[7bb7185ad9fc497b82cbe936378c785d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b3a8ac68afa44acab2c28d535eb7f3e7.png
[a262cb6ef1b64df2b5bedafb2a4daf68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/23296322c2a04d989d42d8c6b17cd842.png
[007d63df18e84f9c9567c611f1181a1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/20fdb8ea87af4ad18295d8abdbb80fc1.png
[1695a70d883f4dbc8079c7c84db12b64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/115c5506480c435da8daaf023e57be9c.png
[99482659ae61466da214d2276a8c8caa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/bdb9e58cf24447659125c8c0897ff768.png
[Link 1]: https://gitee.com/cold-in-the-east/happy-june-1st