千羽 发表于 2024-1-22 19:37

【羽图】《阳光的味道》

本帖最后由 千羽 于 2024-1-23 20:55 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 881px);
display: grid;
place-items: center;
width: 1600px;
height: 1000px;
top:130px;
background: lightblue url('https://www.bohann.net/data/attachment/forum/202401/23/185424nahif4czahit1ral.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.mypic {
      position: absolute;
    right:920px;
    top: 160px;
      cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;
    }
#vid {
      position: absolute;
      width: 100%;
      height: 110%;
      top:-80px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 2;
      opacity: .10;
}
</style>   
<div id="mydiv">
<div class="mypic"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<video id="vid" src="https://img3.tukuppt.com/video_show/2475824/00/07/99/5d149ee9eae95.mp4 " autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5268184" autoplay="" loop=""></audio>
<script>
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>




红影 发表于 2024-1-22 20:21

羽儿的制作色彩明快艳丽，好美啊{:4_199:}

红影 发表于 2024-1-22 20:23

这个还带视频的，美丽的光影，让画面更有灵动感了{:4_187:}

马黑黑 发表于 2024-1-22 20:28

今天需要阳光。感谢感谢

马黑黑 发表于 2024-1-22 22:05

其实还是应该给音频设置一个控制机制。比方讲，我现在用 Firefox 浏览器打开这个帖子，我的火狐是默认设置，不开启自动播放，这种情况下，访问者通常可能都不知道这个帖子有音乐。

可以给帖子父元素甚至是 document 设置一个点击事件，用以控制音频的播放暂停，代码放在帖子的最后面，就一句：

<script>
document.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

这是点击浏览器视口区域任意地方都可播放/暂停音乐。若想通过帖子主元素点击操作，代码长酱紫：

<script>
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红色部分是帖子主元素的id名称

樵歌 发表于 2024-1-23 09:42

鲜红的太阳冉冉升起，光明温暖四面八方！看着这样美图，听着动人的音乐，沉醉其中了。

樵歌 发表于 2024-1-23 09:43

羽儿实在太棒了{:4_187:}

千羽 发表于 2024-1-23 20:40

红影 发表于 2024-1-22 20:21
羽儿的制作色彩明快艳丽，好美啊

我昨天没看到这么炫目的光啊，今天改了下

千羽 发表于 2024-1-23 20:42

本帖最后由 千羽 于 2024-1-23 20:48 编辑

红影 发表于 2024-1-22 20:21
羽儿的制作色彩明快艳丽，好美啊
我感觉mp4效果太过了，也没法再改小了，便去掉了{:4_201:}

千羽 发表于 2024-1-23 20:47

马黑黑 发表于 2024-1-22 22:05
其实还是应该给音频设置一个控制机制。比方讲，我现在用 Firefox 浏览器打开这个帖子，我的火狐是默认设置 ...

黑黑老师这样改的吗？

<style>
#mydiv { margin: 0 0 0 calc(50% - 881px);
display: grid;
place-items: center;
width: 1600px;
height: 1000px;
top:130px;
background: lightblue url('https://www.bohann.net/data/attachment/forum/202401/23/185424nahif4czahit1ral.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.mypic {
      position: absolute;
    right:920px;
    top: 160px;
      cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;
    }
#vid {
      position: absolute;
      width: 100%;
      height: 110%;
      top:-80px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 2;
      opacity: .11;
}
</style>   
<div id="mydiv">
<div class="mypic"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<video id="vid" src="https://img3.tukuppt.com/video_show/2475824/00/07/99/5d149ee9eae95.mp4 " autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5268184" autoplay="" loop=""></audio>
<script>
document.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>


马黑黑 发表于 2024-1-23 20:50

千羽 发表于 2024-1-23 20:47
黑黑老师这样改的吗？




对，就在你的帖子代码的最后加的script，不过用帖子主体代替document的点击更好：

<script>
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

mydiv 是你帖子主元素的 id 名称

千羽 发表于 2024-1-23 20:57

马黑黑 发表于 2024-1-22 22:05
其实还是应该给音频设置一个控制机制。比方讲，我现在用 Firefox 浏览器打开这个帖子，我的火狐是默认设置 ...

黑黑老师，我又改了{:4_181:}

千羽 发表于 2024-1-23 20:58

本帖最后由 千羽 于 2024-1-23 21:08 编辑

马黑黑 发表于 2024-1-23 20:50
对，就在你的帖子代码的最后加的script，不过用帖子主体代替document的点击更好：



谢谢黑黑老师，我今天收获不小，再次感谢啦{:4_187:}{:4_180:}

千羽 发表于 2024-1-23 21:07

樵歌 发表于 2024-1-23 09:42
鲜红的太阳冉冉升起，光明温暖四面八方！看着这样美图，听着动人的音乐，沉醉其中了。

谢谢樵歌老师的美好文字{:4_187:}

千羽 发表于 2024-1-23 21:10

红影 发表于 2024-1-22 20:23
这个还带视频的，美丽的光影，让画面更有灵动感了

我把你和黑黑老师的mp4都收集了，都很喜欢，省我去找的时间了{:4_173:}

千羽 发表于 2024-1-23 21:12

马黑黑 发表于 2024-1-23 20:50
对，就在你的帖子代码的最后加的script，不过用帖子主体代替document的点击更好：




我以后就用这代码了，好高兴啊，再次谢谢黑黑老师{:4_187:}{:4_180:}

红影 发表于 2024-1-23 21:45

千羽 发表于 2024-1-23 20:42
我感觉mp4效果太过了，也没法再改小了，便去掉了

看到还有啊，有视频的动态也挺好的。{:4_187:}

红影 发表于 2024-1-23 21:46

千羽 发表于 2024-1-23 21:10
我把你和黑黑老师的mp4都收集了，都很喜欢，省我去找的时间了

自己找的可能更喜欢啊，那里的视频真的不少呢，都很好看的{:4_187:}
页: [1]
查看完整版本: 【羽图】《阳光的味道》