前言
啊？ 今天是六一了，过得真的快，我已经是大孩子了… 而小学及以下的孩子正在快乐的玩耍，我们大学生却已经看淡风云好吧~
而对于马上要高考的学子来说，进入六月份不知道是如何的心情，不管怎么说，六一快乐！ 高考胜利！
今天要分享一个好玩的前端页面特效，也是为庆祝六一这个美好的节日。话不多说，直接代码快乐~
先展示层级关系
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首页的，里面有一只萤火虫被撞倒瓶子...，寓意这抓住希望吧.....
而当我们把鼠标放到进入瓶子的边界的时候，就发出闪~耀的光芒，真的是亮飞好吧。 这里属于鼠标的滑入划出而触发事件...
然后不断抖瓶，直到飞出，这里做了一个动画实现效果，Y坐标变化
当我点击所指的时候，就页面跳转，这时就画面变化
<!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> <!-- <div style="background:rgb(249,133,133); width:100%; height:auto; line-height:500px; font-size:100px;text-align:center; color:#FFFFFF"></div> <strong style="float: right; position: fixed;line-height:100px; font-size:100px;text-align:center; color:#FFFFFF">程序员的礼物</strong> --> <script type="text/javascript" src="js/snow.src.js"></script> </body> </html>
感觉真的很快乐儿童好吧
开始拆盒子，然后起飞~
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; }
额， 由于代码量较多，我这里就不全部展示，我把连接放在下面了，要用的话就自取。六一快乐！
六一快乐炫酷起飞
结尾
六一，也可以让我们一起来认识这些小小程序员，看他们用童趣和想象力，coding出一个与众不同的童年。
8岁的Daniel：DIY机器人，还想用编程和外星人交流
他喜欢编程，从Scratch学到python，自己做过自动搬运垃圾的智能机械臂，还有一个可以和他聊天的对话机器人，因为编程，学习成绩也蹭蹭往上涨。
8岁的Ken：我想要发明很好玩的游戏，然后变有钱
一次朋友去他家做编程作业，作业是利用编程实现一个动画场景：孙小弟在树林中吃到一个水果，发现水果有毒，整个人都变成了蓝色。然后孙小弟说，啊，有毒！Ken看完觉得非常好玩，就对编程产生了兴趣，开始自己的编程学习之路。
小学生禹辰：组装服务器芯片，破解代码密室，so easy
过去不久的华为开发者大会上，出现了一位年纪最小的神秘参会者。在大会上，，他不仅独立完成了华为云社区技术闯关活动“代码密室”的三层代码破解，还成功组装了鲲鹏服务器芯片，真是英雄出少年！
