AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【CSS畅想】萤星漫舞，我用CSS绘制了一个属于夏日的回忆

2022-10-13 235
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 用技术实现梦想，用梦想打开创意之门。萤星漫舞，我用CSS绘制了一个属于夏日的回忆

夏日回忆

萤火虫的灵感来源于我玩的一个小游戏。小游戏里面有个活动叫“萤星漫舞”，使用道具的时候，会有萤火虫闪光的特效，特别好看。

萤火虫的记忆还停留在我的童年，乡间田野之间，夏日到来的夜晚，偶尔会和玩伴们一起去冒险，经常能遇到星星点点的萤火虫。长大后，繁华都市的华灯，虽然璀璨夺目，但是让我感觉遥远且冰冷。萤火微小，却照亮了我探索自然的路。

再次遇到萤火虫相关的场景，勾起我对童年的美好回忆，于是我决定复刻这个场景，来迎接夏日的到来。萤星漫舞的效果使用CSS3便能实现。

“望孟夏之短夜兮,何晦明之若岁？” --屈原《九章》

“孟夏之夜虽然短暂，但如遇萤星之光，可照前进之路。”--叶一一


在线预览

代码放到在线预览平台，可以查看完整代码，并体验效果，


背景图

截取了一张游戏里的图做背景

图截好像有点长，^_^

最终呈现

按钮霓虹灯效果

为了增加趣味性，有些按钮激活状态下，会有光束游走效果，像老牌店铺的霓虹灯。

  • 其实是四条边上移动的四条线，除了第一条线以外，移动的线设置延时时间，便可实现循环移动的效果。
  • 延迟时间和上一条线的完成时间有关系，如果设置1s的完成时间，因为对面的线是不能同时出现的，所以之后每条线延迟时间是0.25s*（n-1），n为当前线出现的顺序；
  • 每次点击，萤星效果会持续3秒钟就会消失，再次点击按钮可重现；

css

#button {position: absolute;
left: 50%;
bottom: 15%;
width: 150px;
height: 40px;
line-height: 40px;
background: transparent;
margin-left: -75px;
text-align: center;
color: #fc91ab;border: 2pxsolid#fc91ab;cursor: pointer;
overflow: hidden;
display: block;
z-index: 99;
}
#button:hover {background-color: #fc91ab;color: #fff;box-shadow: 0025px#fc91ab;border: none;
}
#button:hover i {position: absolute;
}
#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(toright, transparent, #fff);animation: moveligth11slinearinfinite;
}
#button:hover i:nth-child(2) {top: -100%;
right: 0;
background: linear-gradient(tobottom, transparent, #fff);animation: moveligth21slinearinfinite;
animation-delay: 0.25s;
}
#button:hover i:nth-child(3) {bottom: 0;
right: -100%;
background: linear-gradient(toleft, transparent, #fff);animation: moveligth31slinearinfinite;
animation-delay: 0.5s;
}
#button:hover i:nth-child(4) {bottom: -100%;
left: 0;
background: linear-gradient(totop, transparent, #fff);animation: moveligth41slinearinfinite;
animation-delay: 0.75s;
}
@keyframesmoveligth1 {
0% {
left: -100%;
  }
50%,
100% {
left: 100%;
  }
}
@keyframesmoveligth2 {
0% {
top: -100%;
  }
50%,
100% {
top: 100%;
  }
}
@keyframesmoveligth3 {
0% {
right: -100%;
  }
50%,
100% {
right: 100%;
  }
}
@keyframesmoveligth4 {
0% {
bottom: -100%;
  }
50%,
100% {
bottom: 100%;
  }
}

html

<divid="button"><i></i><i></i><i></i><i></i>萤星漫舞</div>

js

varlight=document.getElementById('light');
varsearchlight=document.getElementById('searchlight');
varaperture=document.getElementById('aperture');
varbutton=document.getElementById('button');
// 设置样式functionsetStyle(str, flag) {
light.style.display=str;
searchlight.style.display=str;
aperture.style.display=str;
button.disabled=flag;
}
// 点击事件 开启动画效果functionlightShow() {
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: 40pxsolidtransparent;
border-left: 100pxsolid#d1da8b;border-top: 40pxsolidtransparent;
border-radius: 5px;
animation: searchlightchange3slinearalternateinfinite;
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);
}
@keyframessearchlightchange {
0% {
opacity: 0.1;
  }
50% {
opacity: 0.3;
  }
100% {
opacity: 0.1;
  }
}
#aperture {position: absolute;
top: 461px;
left: 158px;
width: 54px;
height: 15px;
border-radius: 100%;
background: #fff;transform: rotate3d(1, 0, 1, -57deg);
box-shadow: 1px1px20px#fff;z-index: 109;
display: none;
}

html

<divid="searchlight"></div><divid="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: 1px1px20px#c3cb78;animation: spotchange1.5slinearalternateinfinite;
}
@keyframesspotchange {
0% {
opacity: 1;
  }
50% {
opacity: 0.5;
  }
100% {
opacity: 1;
  }
}
#light .spot::before {content: '';
position: absolute;
border-radius: 50%;
background: rgba(195, 203, 120, 0.7);
box-shadow: 1px1px10px#c3cb78;left: -1px;
top: -1px;
}
#light .spot-1 {top: 10px;
left: 10px;
width: 5px;
height: 5px;
}
#light .spot-1::before {width: 7px;
height: 7px;
}
#light .spot-2 {top: 35px;
left: -5px;
width: 3px;
height: 3px;
}
#light .spot-2::before {width: 5px;
height: 5px;
}
#light .spot-3 {top: 35px;
left: 30px;
width: 3px;
height: 3px;
}
#light .spot-3::before {width: 5px;
height: 5px;
}
#light .spot-4 {top: 22px;
left: 57px;
width: 5px;
height: 5px;
}
#light .spot-4::before {width: 7px;
height: 7px;
}
#light .spot-5 {top: 15px;
left: 90px;
width: 3px;
height: 3px;
}
#light .spot-5::before {width: 5px;
height: 5px;
}
#light .spot-6 {top: 75px;
left: 50px;
width: 5px;
height: 5px;
}
#light .spot-6::before {width: 7px;
height: 7px;
}
#light .spot-7 {top: 54px;
left: 74px;
width: 3px;
height: 3px;
}
#light .spot-7::before {width: 5px;
height: 5px;
}
#light .spot-8 {top: -5px;
left: 44px;
width: 3px;
height: 3px;
}
#light .spot-8::before {width: 5px;
height: 5px;
}
#light .spot-9 {top: 80px;
left: 75px;
width: 3px;
height: 3px;
}
#light .spot-9::before {width: 5px;
height: 5px;
}
#light .spot-10 {top: 60px;
left: 35px;
width: 3px;
height: 3px;
}
#light .spot-10::before {width: 5px;
height: 5px;
}

html

<ulid="light"><liclass="spot spot-1"></li><liclass="spot spot-2"></li><liclass="spot spot-3"></li><liclass="spot spot-4"></li><liclass="spot spot-5"></li><liclass="spot spot-6"></li><liclass="spot spot-7"></li><liclass="spot spot-8"></li><liclass="spot spot-9"></li><liclass="spot spot-10"></li></ul>

总结

关于萤火虫的回忆就告一段落了。其实「童年」和「夏天」这两个标签，能碰撞出很多美好回忆。莲蓬、溪流、捉虾、西瓜、知了、蛙叫、萤火虫等等，离自然越近的时候，夏天越发有趣。

所以，我比较喜欢偏生活类的游戏，算是与生俱来的种田情怀吧。


文章标签：
JavaScript
前端开发
容器
关键词：
CSS绘制
叶一一
目录
相关文章
叶一一
|
前端开发 容器
「CSS畅想」七夕寄情，我绘制了一副双色莲花图
用技术实现梦想，用梦想打开创意之门。七夕寄情，我用CSS绘制了一副双色莲花图。
叶一一
199 1
「CSS畅想」七夕寄情，我绘制了一副双色莲花图
叶一一
|
前端开发 算法 JavaScript
【CSS畅想】宅家必备，我用CSS复刻了一个游戏机
用技术实现梦想，用梦想打开创意之门。宅家必备，我用CSS复刻了一个游戏机。
叶一一
150 1
叶一一
|
前端开发 JavaScript UED
「CSS畅想」何以解忧，美食足矣，用技术给好友开发了一个零食盲盒小游戏
前端技术从业者与非技术好友互动，用技术给好友开发了一个零食盲盒小游戏
叶一一
266 1
叶一一
|
前端开发 容器
「CSS畅想」好友想回忆童年，安排~为她做了一个果宝特攻的换装
端技术从业者与非技术好友互动，好友想回忆童年，我为她用CSS技术做了一个果宝特攻的换装
叶一一
187 1
叶一一
|
前端开发
「CSS畅想」技术传递乐趣，好友说她想要七龙珠，我帮她召唤了神龙
前端技术从业者与非技术好友互动，好友说她想要七龙珠，我帮她召唤了神龙。
叶一一
130 1
叶一一
|
前端开发 索引
「CSS畅想」技术传递乐趣，送给好友的解答之书
前端技术从业者与非技术好友互动第三弹，我给好友写了一本解答之书，特意为好友隐藏了一个彩蛋。
叶一一
99 1
叶一一
|
前端开发
「CSS畅想」周期性事情怕忘，来看看一个月内都安排在哪天
前端玩转CSS，可以创造出不少有趣的效果。今天实现了一个周期性日期获取功能，小功能大用处。
叶一一
128 1
杭州-田迪生
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
杭州-田迪生
1427 0
嘿嘿不务正业
|
前端开发 JavaScript
手把手用 CSS 绘制一个忽闪忽闪的可爱小幽灵
通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。
嘿嘿不务正业
240 0
叶一一
|
前端开发 容器
「CSS畅想」技术传递乐趣，好友想玩游戏机，我为她画了一个套圈水机
前端技术从业者与非技术好友互动，好友想玩游戏机，我为她画了一个套圈水机。
叶一一
160 1

热门文章

最新文章

  • 1
    如何用纯 CSS 创作一个赛车 loader
  • 2
    CSS3中的选择器
  • 3
    CSS中的特殊符号
  • 4
    CSS伪元素实现的3D按钮
  • 5
    webpack window 使用sass来编译css样式
  • 6
    碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
  • 7
    脑洞大开：如何使用CSS实现自定义圆角虚线框
  • 8
    CSS3的新属性的一下总结
  • 9
    css属性列表 和 属性值含义
  • 10
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 1
    只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！
    50
  • 2
    前端 CSS 经典：省略号
    107
  • 3
    前端 CSS 经典：clip、clip-path
    76
  • 4
    前端 CSS 经典：box-shadow
    99
  • 5
    前端 css 经典：选择器速记
    48
  • 6
    前端 css 经典：grid 栅格布局
    61
  • 7
    前端 css 经典：transition 过渡和 animation 动画
    88
  • 8
    【css炫酷动画】让面试官眼前一亮的故障风格文字动画，3年Web前端开发工程师面试经验分享
    50
  • 9
    一文搞懂css常用字体属性与背景属性(2)，非科班面试之旅
    47
  • 10
    CSS 弹性布局，大厂意外流出
    40

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解