三月的阳光 发表于 2022-2-6 09:35

仓央嘉措情歌

本帖最后由 三月的阳光 于 2022-2-8 15:23 编辑 <br /><br /><p></p><style type="text/css">
.paBox { /* 父框 */
      margin: 50px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('http://www.taohejy.com/data/attachment/forum/202202/06/095545a54tz1jfeze1t7dz.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 600px; height: 2px;
      background: silver;
      left: 160px; 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:300px; top:500px; color: #fff;"><marquee scrollamount="3" direction="left"><font color="Blue"><font face="黑体"><font size="5">仓央嘉措情歌</font></font></font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="http://image.hnol.net/c/swf/2022-02/08/15/202202081518544431-2813635.swf" 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>




<div id="comment_1434670" class="cm">
</div>
<br><br><br><br><br><br>

三月的阳光 发表于 2022-2-6 09:37

哈哈，向队长偷学做一帖，谢谢黑黑老师代码~~{:4_205:}

三月的阳光 发表于 2022-2-6 09:40

@加林森

@马黑黑有否错误之处，请多多指教~~{:4_190:}

马黑黑 发表于 2022-2-6 10:20

不错的，就是，好像JS代码被吞噬了

加林森 发表于 2022-2-6 11:14

三月的阳光 发表于 2022-2-6 09:37
哈哈，向队长偷学做一帖，谢谢黑黑老师代码~~

兄弟上午好！新年快乐、新春快乐！{:4_190:}

我的就是你的，我们不要分得那么清哈。{:4_205:}

加林森 发表于 2022-2-6 11:16

三月的阳光 发表于 2022-2-6 09:40
@加林森

@马黑黑有否错误之处，请多多指教~~

来了来了。我喜欢的歌曲，制作得真好。好像播放器停不下来呢。应该一点播放器可以控制它是播放还是暂停的。

红影 发表于 2022-2-6 12:57

这个构思真好，布达拉宫上的佛光哈。做得真棒，阳光哥哥很赞{:4_187:}

大猫咪 发表于 2022-2-6 13:06

经典 ！谢谢阳光兄分享，真棒！新年快乐，幸福安康！

{:4_204:}{:4_191:}{:4_199:}

小辣椒 发表于 2022-2-6 15:48

三月的阳光 发表于 2022-2-6 09:37
哈哈，向队长偷学做一帖，谢谢黑黑老师代码~~

阳光新年好~~{:4_187:}

你这个代码少了后面的JS部分，我给你补上去了，现在播放器按钮可以了

小辣椒 发表于 2022-2-6 15:50

阳光可以去黑黑分享的源码那边看看，你现在的代码有许多多余的不需要的部分。

小辣椒 发表于 2022-2-6 16:24

阳光，这些代码编制的不用上传空间，你可以玩的。

加林森 发表于 2022-2-6 17:02

{:4_178:}
页: [1]
查看完整版本: 仓央嘉措情歌