CSS畅想 | 萤星漫舞，我用CSS绘制了一个属于夏日的回忆
【摘要】 用技术实现梦想，用梦想打开创意之门。萤星漫舞，我用CSS绘制了一个属于夏日的回忆
夏日回忆
萤火虫的灵感来源于我玩的一个小游戏。小游戏里面有个活动叫“萤星漫舞”，使用道具的时候，会有萤火虫闪光的特效，特别好看。
萤火虫的记忆还停留在我的童年，乡间田野之间，夏日到来的夜晚，偶尔会和玩伴们一起去冒险，经常能遇到星星点点的萤火虫。长大后，繁华都市的华灯，虽然璀璨夺目，但是让我感觉遥远且冰冷。萤火微小，却照亮了我探索自然的路。
再次遇到萤火虫相关的场景，勾起我对童年的美好回忆，于是我决定复刻这个场景，来迎接夏日的到来。萤星漫舞的效果使用CSS3便能实现。
“望孟夏之短夜兮,何晦明之若岁？” --屈原《九章》
“孟夏之夜虽然短暂，但如遇萤星之光，可照前进之路。”--叶一一
在线预览
代码放到在线预览平台，可以查看完整代码，并体验效果，
背景图
截取了一张游戏里的图做背景
最终呈现
按钮霓虹灯效果
为了增加趣味性，有些按钮激活状态下，会有光束游走效果，像老牌店铺的霓虹灯。
- 其实是四条边上移动的四条线，除了第一条线以外，移动的线设置延时时间，便可实现循环移动的效果。
- 延迟时间和上一条线的完成时间有关系，如果设置1s的完成时间，因为对面的线是不能同时出现的，所以之后每条线延迟时间是0.25s*（n-1），n为当前线出现的顺序；
- 每次点击，萤星效果会持续3秒钟就会消失，再次点击按钮可重现；
css
#button:hover i:nth-child(odd) {
width: 100%;
height: 2px;
}
#button:hover i:nth-child(even) {
width: 2px;
height: 100%;
}
#button:hover i:nth-child(1) {
top: 0;
left: -100%;
background: linear-gradient(to right, transparent, #fff);
animation: moveligth1 1s linear infinite;
}
#button:hover i:nth-child(2) {
top: -100%;
right: 0;
background: linear-gradient(to bottom, transparent, #fff);
animation: moveligth2 1s linear infinite;
animation-delay: 0.25s;
}
#button:hover i:nth-child(3) {
bottom: 0;
right: -100%;
background: linear-gradient(to left, transparent, #fff);
animation: moveligth3 1s linear infinite;
animation-delay: 0.5s;
}
#button:hover i:nth-child(4) {
bottom: -100%;
left: 0;
background: linear-gradient(to top, transparent, #fff);
animation: moveligth4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes moveligth1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes moveligth2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes moveligth3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes moveligth4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}html
<div id="button">
<i></i>
<i></i>
<i></i>
<i></i>
萤星漫舞
</div>js
点击按钮，开启动画效果，同时设置样式。
var light = document.getElementById('light');
var searchlight = document.getElementById('searchlight');
var aperture = document.getElementById('aperture');
var button = document.getElementById('button');
// 设置样式
function setStyle(str, flag) {
light.style.display = str;
searchlight.style.display = str;
aperture.style.display = str;
button.disabled = flag;
}
// 点击事件 开启动画效果
function lightShow() {
setStyle('block', true);
setTimeout(function () {
setStyle('none', false);
}, 3000);
}
button.onclick = lightShow;竹筒手电筒效果
手电筒效果包括屏幕和光束两部分
- 屏幕由椭圆实现，椭圆背景设置为白色再加上外阴影，便跟实物很像了；
- 光束的形状是一个梯形，但是梯形的边不够圆滑，不够美观，所以再光束尾端我又加了一个椭圆，这样边缘就有了弧度；
css
#searchlight {
position: absolute;
top: 407px;
left: 85px;
height: 45px;
border-radius: 5px;
border-bottom: 40px solid transparent;
border-left: 100px solid #d1da8b;
border-top: 40px solid transparent;
border-radius: 5px;
animation: searchlightchange 3s linear alternate infinite;
transform-origin: 100%;
transform: rotate(51deg);
z-index: 108;
display: none;
}
#searchlight::before {
content: '';
position: absolute;
border-radius: 50%;
width: 37px;
height: 125px;
background: #d1da8b;
left: -119px;
top: -40px;
transform: rotate3d(1, 0, 1, 0deg);
}
@keyframes searchlightchange {
0% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0.1;
}
}html
<div id="searchlight"></div>
<div id="aperture"></div>萤火虫发光效果
萤火虫发光效果仿照的星星闪烁效果，即明暗交替。将每个萤火虫容器的背景设置透明度从1到0.5即可。
css
#light {
position: absolute;
top: 376px;
left: 94px;
width: 125px;
height: 100px;
z-index: 119;
background: none;
display: none;
}
#light .spot {
border-radius: 50%;
background: #c3cb78;
position: absolute;
box-shadow: 1px 1px 20px #c3cb78;
animation: spotchange 1.5s linear alternate infinite;
}
@keyframes spotchange {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}html
<ul id="light">
<li class="spot spot-1"></li>
<li class="spot spot-2"></li>
<li class="spot spot-3"></li>
<li class="spot spot-4"></li>
<li class="spot spot-5"></li>
<li class="spot spot-6"></li>
<li class="spot spot-7"></li>
<li class="spot spot-8"></li>
<li class="spot spot-9"></li>
<li class="spot spot-10"></li>
</ul>总结
关于萤火虫的回忆就告一段落了。其实「童年」和「夏天」这两个标签，能碰撞出很多美好回忆。莲蓬、溪流、捉虾、西瓜、知了、蛙叫、萤火虫等等，离自然越近的时候，夏天越发有趣。
所以，我比较喜欢偏生活类的游戏，算是与生俱来的种田情怀吧。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）