愿情 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-9-4 13:23

愿情

本帖最后由马黑黑于 2024-9-4 13:37 编辑 <br /><br /><style>
#mydiv {
margin: 100px 0 30px calc(50% - 721px);
width: 1280px;
height: 700px;
background: url('https://638183.freep.cn/638183/t24/webp2/yrqk.webp') no-repeat center/cover;
box-shadow: 0 0 8px #0000008f;
z-index: 1;
position: relative;
}
.player {
--size: 160px;
position: absolute;
width: var(--size);
height: var(--size);
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
.player > span {
position: absolute;
left: calc(var(--size) / 4);
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
border-color: transparent lightblue steelblue transparent;
transform-origin: 100% 100%;
filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 60px; top:20px; }
.player:nth-of-type(2) { left: 60px; bottom: 20px; }
.player:nth-of-type(3) { left: calc(50% - 80px); bottom: calc(50% - 80px); }
#vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .95;
object-fit: cover;
mix-blend-mode: screen;
-webkit-mask: radial-gradient(circle, transparent 160px, red 220px, red 0);
pointer-events: none;
}
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=424496456" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.mp4" autoplay loop muted></video>
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>

<script>
var players = mydiv.querySelectorAll('.player');

mState = () => {
mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};

createPlayers = (elms) => {
elms.forEach(elm => {
Array(total = 5).fill(0).forEach((s,k) => {
s = document.createElement('span');
s.style.transform = `rotate(${360 / total * k}deg)`;
elm.appendChild(s);
});
});
};

createPlayers(players);

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2024-9-4 13:24

本帖最后由马黑黑于 2024-9-4 13:37 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 700px;
background: url('https://638183.freep.cn/638183/t24/webp2/yrqk.webp') no-repeat center/cover;
box-shadow: 0 0 8px #0000008f;
position: relative;
}
.player {
--size: 160px;
position: absolute;
width: var(--size);
height: var(--size);
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
.player > span {
position: absolute;
left: calc(var(--size) / 4);
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
border-color: transparent lightblue steelblue transparent;
transform-origin: 100% 100%;
filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 60px; top:20px; }
.player:nth-of-type(2) { left: 60px; bottom: 20px; }
.player:nth-of-type(3) { left: calc(50% - 80px); bottom: calc(50% - 80px); }
#vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .95;
object-fit: cover;
mix-blend-mode: screen;
-webkit-mask: radial-gradient(circle, transparent 160px, red 220px, red 0);
pointer-events: none;
}
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=424496456" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.mp4" autoplay loop muted></video>
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>

<script>
var players = mydiv.querySelectorAll('.player');

mState = () => {
mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};

createPlayers = (elms) => {
elms.forEach(elm => {
Array(total = 5).fill(0).forEach((s,k) => {
s = document.createElement('span');
s.style.transform = `rotate(${360 / total * k}deg)`;
elm.appendChild(s);
});
});
};

createPlayers(players);

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-4 13:27

视频logo在中央，所以用个圆形遮罩设置，肉眼可见。

播放控制器三个，兼做装饰。叶片在JS里用自设函数 createPlayers() 生成。

朵拉发表于 2024-9-4 13:44

漂亮，欣赏学习了{:4_204:}

梦江南 发表于 2024-9-4 15:21

谢谢老师辛苦！学习了！{:4_187:}

梦江南 发表于 2024-9-4 15:23

问黑黑老师，这二天怎么没有看到红影啊？

花飞飞 发表于 2024-9-4 15:43

马黑黑发表于 2024-9-4 13:27
视频logo在中央，所以用个圆形遮罩设置，肉眼可见。

播放控制器三个，兼做装饰。叶片在JS里用自设函数 c ...

用伪类选择器把整个风车一拖二。。。把叶片旋转交给了JS。。
这跟做好之后再克隆又是不一样的实现手法。。
看完觉得条条大路通罗马，方法好灵活啊。。

花飞飞 发表于 2024-9-4 15:45

这个视频清晰得很，
原本嫌弃大的中间有大水印，
老师用圆形遮罩这么设置一下就完美之极。。{:4_199:}

花飞飞 发表于 2024-9-4 15:46

本帖最后由花飞飞于 2024-9-4 15:47 编辑

对比一下教程版的风车，和这个实例里的区别，
角度重叠更多一些，显得更加紧凑。。
更接近真实风车，完美。{:4_199:}

彩云归 发表于 2024-9-4 15:47

三个漂亮的纸风车播放器按钮。

小辣椒 发表于 2024-9-4 17:24

三个风车播放器联动视频停止效果，黑黑又一个漂亮的教程分享{:4_178:}

马黑黑 发表于 2024-9-4 17:50

小辣椒发表于 2024-9-4 17:24
三个风车播放器联动视频停止效果，黑黑又一个漂亮的教程分享

下午好

马黑黑 发表于 2024-9-4 17:50

彩云归发表于 2024-9-4 15:47
三个漂亮的纸风车播放器按钮。

{:4_190:}

马黑黑 发表于 2024-9-4 17:51

花飞飞发表于 2024-9-4 15:46
对比一下教程版的风车，和这个实例里的区别，
角度重叠更多一些，显得更加紧凑。。
更接近真实风车，完美 ...

风车叶数量不同吧

马黑黑 发表于 2024-9-4 17:51

花飞飞发表于 2024-9-4 15:45
这个视频清晰得很，
原本嫌弃大的中间有大水印，
老师用圆形遮罩这么设置一下就完美之极。。

取巧方法，不弄巧成拙就好

马黑黑 发表于 2024-9-4 17:52

花飞飞发表于 2024-9-4 15:43
用伪类选择器把整个风车一拖二。。。把叶片旋转交给了JS。。
这跟做好之后再克隆又是不一样的实现手法。 ...

CSS方法也不错的

马黑黑 发表于 2024-9-4 17:53

梦江南发表于 2024-9-4 15:23
问黑黑老师，这二天怎么没有看到红影啊？

去仙宾量越界菲律宾船只的尺寸了吧

马黑黑 发表于 2024-9-4 17:55

梦江南发表于 2024-9-4 15:21
谢谢老师辛苦！学习了！

{:4_190:}

马黑黑 发表于 2024-9-4 17:55

朵拉发表于 2024-9-4 13:44
漂亮，欣赏学习了

{:4_190:}

小辣椒 发表于 2024-9-4 17:56

马黑黑发表于 2024-9-4 17:50
下午好

黑黑好，每天有新的东东，你太强悍了，佩服哦，晚上见

页: [1] 2 3

花潮论坛's Archiver

愿情