【孟夏之遇】望孟夏之短夜兮,螢星相伴

語言: CN / TW / HK

theme: channing-cyan highlight: arduino-light


“我正在參加「初夏創意投稿大賽」詳情請看:初夏創意投稿大賽

夏日回憶

螢火蟲的靈感來源於我玩的一個小遊戲。小遊戲裏面有個活動叫“螢星漫舞”,使用道具的時候,會有螢火蟲閃光的特效,特別好看。

螢火蟲的記憶還停留在我的童年,鄉間田野之間,夏日到來的夜晚,偶爾會和玩伴們一起去冒險,經常能遇到星星點點的螢火蟲。長大後,繁華都市的華燈,雖然璀璨奪目,但是讓我感覺遙遠且冰冷。螢火微小,卻照亮了我探索自然的路。

再次遇到螢火蟲相關的場景,勾起我對童年的美好回憶,於是我決定復刻這個場景,來迎接夏日的到來。螢星漫舞的效果使用CSS3便能實現。

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

“孟夏之夜雖然短暫,但如遇螢星之光,可照前進之路。”--葉一一

碼上掘金

因為模擬的手機,所以操作區域比較靠下,jym滑動一下就可以看到操作按鈕了。

https://code.juejin.cn/pen/7100479348381057038

背景圖

截取了一張遊戲裏的圖做背景

03.jpeg

圖截好像有點長,^_^

最終效果

03.jpg

按鈕霓虹燈效果

為了增加趣味性,有些按鈕激活狀態下,會有光束遊走效果,像老牌店鋪的霓虹燈。

  • 其實是四條邊上移動的四條線,除了第一條線以外,移動的線設置延時時間,便可實現循環移動的效果。
  • 延遲時間和上一條線的完成時間有關係,如果設置1s的完成時間,因為對面的線是不能同時出現的,所以之後每條線延遲時間是0.25s*(n-1),n為當前線出現的順序;
  • 每次點擊,螢星效果會持續3秒鐘就會消失,再次點擊按鈕可重現;

css

```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: 2px solid #fc91ab; cursor: pointer; overflow: hidden; display: block; z-index: 99; }

button:hover {

background-color: #fc91ab; color: #fff; box-shadow: 0 0 25px #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(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

```js

螢星漫舞

```

js

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

```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; } }

aperture {

position: absolute; top: 461px; left: 158px; width: 54px; height: 15px; border-radius: 100%; background: #fff; transform: rotate3d(1, 0, 1, -57deg); box-shadow: 1px 1px 20px #fff; z-index: 109; display: none; } ```

html

```js

```

螢火蟲發光效果

螢火蟲發光效果仿照的星星閃爍效果,即明暗交替。將每個螢火蟲容器的背景設置透明度從1到0.5即可。

css

```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; } }

light .spot::before {

content: ''; position: absolute; border-radius: 50%; background: rgba(195, 203, 120, 0.7); box-shadow: 1px 1px 10px #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

```js

```

總結

關於螢火蟲的回憶就告一段落了。其實「童年」和「夏天」這兩個標籤,能碰撞出很多美好回憶。蓮蓬、溪流、捉蝦、西瓜、知了、蛙叫、螢火蟲等等,離自然越近的時候,夏天越發有趣。

所以,我比較喜歡偏生活類的遊戲,算是與生俱來的種田情懷吧。

端午將近,我根據遊戲裏元宵節的活動預測了一下端午節活動,準備自己復刻一下「包粽子」活動,敬請期待。