梦的地方

马黑黑 发表于 2024-7-12 07:42

马黑黑 发表于 2024-7-12 07:42

帖子代码
<style>
#mydiv {
--width: 1280px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 700px;
background: radial-gradient(circle, transparent, silver, lightgreen, cyan);
box-shadow: 3px 3px 6px #333;
pointer-events: none;
overflow: hidden;
position: relative;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
inset: 0;
background: rgba(0, 100, 100, .15);
}
#mydiv::after {
width: 100px;
height: 100px;
top: 40px;
left: calc(50% - 50px);
background: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
filter: drop-shadow(0 0 26px lightblue);
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 70px);
object-fit: cover;
mix-blend-mode: color-burn;
opacity: .75;
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>

<div id="mydiv" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2103389092" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" muted loop autoplay disablePictureInPicture></video>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
aud.paused ? vid.pause() : vid.play();
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
mydiv.title = ['暂停','播放'][+aud.paused];
}
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-12 07:57

本帖最后由马黑黑于 2024-7-12 08:01 编辑

本帖：

（一）使用帖子主元素渐变背景 + ::before伪元素纯色背景构建一个简单的背景图案，其结果将作用于视频，视频播放时能产生奇妙的效果。不同的配色、色彩的位置以及对应数据的透明度设置，将可能产生不一样的效果；

（二）视频需要设置 mix-blend-mode 属性为一个合适的值，这样步骤一的设置才能和视频移到产生融合作用。

（三）小播使用 ::after 伪元素做成，放个小背景图片。帖子主元素 pointer-events 属性设置 none，表示它不接受设备指针点击操作，该属性有继承性，设置了不可点击的容器其下的所有子元素也将不能接受点击操作，因此，::after 伪元素又将 pointer-events 属性设置为 auto（自动），以便让小播的音频控制功能有效。

（四）JS部分极其简单：audio音频控件三个事件合在一处写，事件发生时执行的内容是视频的暂停或播放、CSS关键帧动画的暂停与继续、按钮的提示语变更。这三个事件分别是：

canplay : 音频可以播放
playing : 正在开始播放
pause : 暂停中

逻辑上，这三个事件如果被触发，它们要做的事情都是一样的，就是，判断audio音频控件是否暂停中，若是，酱紫做，若不是，囊子做。

南无月 发表于 2024-7-12 08:37

背景线性渐变，
视频用了颜色加深滤镜～
简单搭配出奇妙梦幻效果

南无月 发表于 2024-7-12 08:39

这个视频选的十分很好看，音乐轻盈欢快～多点几个赞，108

梦江南 发表于 2024-7-12 08:50

这个背景很美。老师，每天一新作，消化不了啦！

红影发表于 2024-7-12 10:02

黑黑又找到这么漂亮的视频，简直是羡慕嫉妒。悄悄问句：木柄的哪里有卖的{:4_173:}

红影发表于 2024-7-12 10:05

这样的颜色调整十分奇妙，非常适合乐曲名的意境，宇宙原点也是梦开始的地方{:4_187:}

红影发表于 2024-7-12 10:07

马黑黑发表于 2024-7-12 07:57
本帖：

（一）使用帖子主元素渐变背景 + ::before伪元素纯色背景构建一个简单的背景图案，其结果将作用 ...

是的，这个的js特别简洁，就这么几句，三个事件就都是可控的了。{:4_187:}

马黑黑 发表于 2024-7-12 12:14

红影发表于 2024-7-12 10:07
是的，这个的js特别简洁，就这么几句，三个事件就都是可控的了。

交互少JS代码量就不会太多

马黑黑 发表于 2024-7-12 12:15

南无月发表于 2024-7-12 08:37
背景线性渐变，
视频用了颜色加深滤镜～
简单搭配出奇妙梦幻效果

注意 ::before 伪元素纯色背景的作用

马黑黑 发表于 2024-7-12 12:15

红影发表于 2024-7-12 10:05
这样的颜色调整十分奇妙，非常适合乐曲名的意境，宇宙原点也是梦开始的地方

{:4_190:}

马黑黑 发表于 2024-7-12 12:16

红影发表于 2024-7-12 10:02
黑黑又找到这么漂亮的视频，简直是羡慕嫉妒。悄悄问句：木柄的哪里有卖的

这是火星定制版，市面上没有卖，拼夕夕也木有（如有是假货）

马黑黑 发表于 2024-7-12 12:16

南无月发表于 2024-7-12 08:39
这个视频选的十分很好看，音乐轻盈欢快～多点几个赞，108

不是32呀

马黑黑 发表于 2024-7-12 12:17

梦江南发表于 2024-7-12 08:50
这个背景很美。老师，每天一新作，消化不了啦！

{:4_190:}

红影发表于 2024-7-12 20:40

马黑黑发表于 2024-7-12 12:14
交互少JS代码量就不会太多

这个效果好又方便实用，真的太好了{:4_187:}

朵拉发表于 2024-7-12 20:42

欣赏学习中~~{:4_190:}
期待自己也能做出这样的效果哈~~

红影发表于 2024-7-12 20:43

马黑黑发表于 2024-7-12 12:15

非常奇妙的意境。

红影发表于 2024-7-12 20:43

马黑黑发表于 2024-7-12 12:16
这是火星定制版，市面上没有卖，拼夕夕也木有（如有是假货）

这个木柄放大镜听着很珍贵，什么时候我偷过来{:4_189:}

小辣椒 发表于 2024-7-12 22:07

这个视频配的背景图，效果真美

页: [1] 2 3 4

花潮论坛's Archiver

梦的地方