前言
啊？ 今天是六一了，过得真的快，我已经是大孩子了… 而小学及以下的孩子正在快乐的玩耍，我们大学生却已经看淡风云好吧~
而对于马上要高考的学子来说，进入六月份不知道是如何的心情，不管怎么说，六一快乐！ 高考胜利！
今天要分享一个好玩的前端页面特效，也是为庆祝六一这个美好的节日。话不多说，直接代码快乐~
先展示层级关系
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
过去不久的华为开发者大会上，出现了一位年纪最小的神秘参会者。在大会上，，他不仅独立完成了华为云社区技术闯关活动“代码密室”的三层代码破解，还成功组装了鲲鹏服务器芯片，真是英雄出少年！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
