加林森 发表于 2022-5-15 09:16

《哭砂》-- 高胜美


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 605px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/628052c10947543129d1f8c9.jpg') no-repeat;
      left: -214px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 300px; top: 230px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox32 {
      margin: 10px;
      position: relative;
      width: 32px; height: 32px;
      line-height: 32px; font-size: 12px;
      background: linear-gradient(blue,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox32:hover { opacity: 0.8; }
.roBox32:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:240px; top:520px; color:#FFA500;"><marqueescrollamount="3" direction="left" >哭砂-高胜美</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/90285.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>

加林森 发表于 2022-5-15 09:16

哭砂-高胜美
你是我最苦涩的等待

让我欢喜又害怕未来

你最爱说你是一颗尘埃

偶尔会恶作剧的飘进我眼里

宁愿我哭泣不让我爱你

你就真的象尘埃消失在风里

你是我最痛苦的选择

为何你从不放弃漂泊

海对你是那么难分难舍

你总是带回满口袋的砂给我

难得来看我却又离开我

让那手中泄落的砂象泪水流

风吹来的砂落在悲伤的眼里

谁都看出我在等你

风吹来的砂堆积在心里

是谁也擦不去的痕迹

风吹来的砂穿过所有的记忆

谁都知道我在想你

风吹来的砂冥冥在哭泣

难道早就预言了分离

music

你是我最痛苦的选择

为何你从不放弃漂泊

海对你是那么难分难舍

你总是带回满口袋的砂给我

难得来看我却又离开我

让那手中泄落的砂象泪水流

风吹来的砂落在悲伤的眼里

谁都看出我在等你

风吹来的砂堆积在心里

是谁也擦不去的痕迹

风吹来的砂穿过所有的记忆

谁都知道我在想你

风吹来的砂冥冥在哭泣

难道早就预言了分离

风吹来的砂冥冥在哭泣

难道早就预言了分离

（the end）

红影 发表于 2022-5-15 09:19

好听，一首熟悉的老歌。{:4_204:}

加林森 发表于 2022-5-15 09:21

红影 发表于 2022-5-15 09:19
好听，一首熟悉的老歌。

红影上午好。是的，老歌了，高胜美唱的真好听的。

梦油 发表于 2022-5-15 10:12

你这个画面设计很有个性

加林森 发表于 2022-5-15 10:16

梦油 发表于 2022-5-15 10:12
你这个画面设计很有个性

是的，我选了两张，最后决定用这张了。

梦油 发表于 2022-5-15 11:01

加林森 发表于 2022-5-15 10:16
是的，我选了两张，最后决定用这张了。

加林森朋友很有艺术细胞啊！

加林森 发表于 2022-5-15 11:11

梦油 发表于 2022-5-15 11:01
加林森朋友很有艺术细胞啊！

我喜欢美术的。

梦油 发表于 2022-5-15 14:09

加林森 发表于 2022-5-15 11:11
我喜欢美术的。

好啊，有美术的底子，做出的音像也错不了啊。

加林森 发表于 2022-5-15 14:13

梦油 发表于 2022-5-15 14:09
好啊，有美术的底子，做出的音像也错不了啊。

是的。

小辣椒 发表于 2022-5-15 14:14

一个一个播放器复习，现在队长已经水到渠成了{:4_178:}

加林森 发表于 2022-5-15 14:17

小辣椒 发表于 2022-5-15 14:14
一个一个播放器复习，现在队长已经水到渠成了

谢谢，终于成功了。
页: [1]
查看完整版本: 《哭砂》-- 高胜美