加林森 发表于 2022-2-14 17:20

《阿尔山的姑娘》 乌兰图雅 祝大家情人节快乐！


<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/620a1c5a2ab3f51d91ab7940.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .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:580px; 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/88653.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-2-14 17:20

沙发欣赏{:4_187:}

加林森 发表于 2022-2-14 17:22

                                                               阿尔山的姑娘- 乌兰图雅 歌词

看夕阳西下 茫茫草原绿无涯谁在杜鹃湖边 快乐把歌唱一曲一匹骏马 身披那满天彩霞远看似一团火 近看一枝花风吹动年华 梦幻天池到谁家蝴蝶飞过悬崖 何处去采花一甩一甩长发 让那飞燕落黄沙黑眼睛眨呀眨 把冰雪融化阿尔山的姑娘美如画飘飘的长发诉说着情话共饮一杯奶茶 同看天边月牙就算是海角天涯也把我牵挂阿尔山的姑娘美如花灿烂的笑容映红了彩霞轻吟一句情话 绽放一地情花就算是海角天涯也把我牵挂RAP：阿尔山的姑娘 心中的最美日月星辰孕育 不怕雨打风吹阿尔山的姑娘 骄傲的花蕊多少男儿迷醉 和你共饮一杯阿尔山的姑娘 柔情似水我愿骑上骏马 永远把你追随阿尔山的姑娘 你住进我心扉我要化蝶双飞 今生与你依偎

加林森 发表于 2022-2-14 17:25

小九 发表于 2022-2-14 17:20
沙发欣赏

小九好快。哈哈。祝小九情人节快乐！{:4_187:}

红影 发表于 2022-2-14 19:28

这闪光有点看不出了，放浅色背景上，队长可以换个闪光棒的颜色呢{:4_187:}

红影 发表于 2022-2-14 19:30

歌曲好听，真热烈，跟队长一起祝大家情人节快乐{:4_187:}

元首 发表于 2022-2-14 19:36

快乐的歌曲

加林森 发表于 2022-2-14 20:14

红影 发表于 2022-2-14 19:28
这闪光有点看不出了，放浅色背景上，队长可以换个闪光棒的颜色呢

什么颜色为好？

元时时 发表于 2022-2-14 20:15

队长节日快乐{:4_204:}{:4_189:}

加林森 发表于 2022-2-14 20:23

元时时 发表于 2022-2-14 20:15
队长节日快乐

大家都快乐！{:4_204:}

红影 发表于 2022-2-14 20:49

加林森 发表于 2022-2-14 20:14
什么颜色为好？

不种地，队长可以一个个试一下的。

加林森 发表于 2022-2-14 20:51

红影 发表于 2022-2-14 20:49
不种地，队长可以一个个试一下的。

嗯嗯，好建议。谢谢啦！{:4_187:}

元杉 发表于 2022-2-14 20:55

乌兰图雅，好得很！

加林森 发表于 2022-2-14 20:56

元杉 发表于 2022-2-14 20:55
乌兰图雅，好得很！

必须的。

红影 发表于 2022-2-14 21:09

加林森 发表于 2022-2-14 20:51
嗯嗯，好建议。谢谢啦！

每换一种颜色都可以直观看效果的。

加林森 发表于 2022-2-14 21:53

红影 发表于 2022-2-14 21:09
每换一种颜色都可以直观看效果的。

嗯嗯，明白的。
页: [1]
查看完整版本: 《阿尔山的姑娘》 乌兰图雅 祝大家情人节快乐！