程池 - 敦煌生命
本帖最后由 马黑黑 于 2024-6-27 07:54 编辑 <br /><br /><style>#tz {
--width: 1024px;
margin: 100px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 640px;
background: url('https://638183.freep.cn/638183/t24/3/dyhl.jpg') no-repeat center/cover;
box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
overflow: hidden;
position: relative;
}
#player {
position: absolute;
display: grid;
place-items: center;
left: 75%;
top: 52%;
width: var(--ww);
height: var(--ww);
background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat 50%/60%;
border-radius: 50%;
cursor: pointer;
transition: .7s;
animation: rot 6s linear infinite var(--state);
--ww: 120px;
--size: 20px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: linear-gradient(green, cyan);
box-shadow: 0 0 6px rgba(0, 0, 0, .1);
animation: flyout 2s forwards;
}
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 60px);
object-fit: cover;
mix-blend-mode: overlay;
pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=75392" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
<div id="player" title="暂停"></div>
</div>
<script>
var ccs = [];
new Array(total = 12).fill(0).map((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `--deg: ${360 / total * k}deg`;
player.appendChild(c);
ccs.push(c);
});
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = ['暂停','播放'][+aud.paused];
ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>
本帖最后由 马黑黑 于 2024-6-27 07:53 编辑
帖子代码
<style>
#tz {
--width: 1024px;
margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 640px;
background: url('https://638183.freep.cn/638183/t24/3/dyhl.jpg') no-repeat center/cover;
box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
overflow: hidden;
position: relative;
}
#player {
position: absolute;
display: grid;
place-items: center;
left: 75%;
top: 52%;
width: var(--ww);
height: var(--ww);
background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat 50%/60%;
border-radius: 50%;
cursor: pointer;
transition: .7s;
animation: rot 6s linear infinite var(--state);
--ww: 120px;
--size: 20px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: linear-gradient(green, cyan);
box-shadow: 0 0 6px rgba(0, 0, 0, .1);
animation: flyout 2s forwards;
}
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 60px);
object-fit: cover;
mix-blend-mode: overlay;
pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=75392" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
<div id="player" title="暂停"></div>
</div>
<script>
var ccs = [];
new Array(total = 12).fill(0).map((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `--deg: ${360 / total * k}deg`;
player.appendChild(c);
ccs.push(c);
});
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = ['暂停','播放'][+aud.paused];
ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>
哇，好精彩！问好老师！{:4_187:} 本帖最后由 马黑黑 于 2024-6-27 12:34 编辑
本帖：
（一）CSS代码尽可能规范书写，便于阅读；
（二）代码 04 行，帖子水平方向绝对居中：利用 calc() 函数计算左外边距，需要一个变量 --width，和一个环境横向偏移量（花潮是 81px）。注意代码 05 行，帖子宽度使用了相同的CSS变量 --width 以便前后一致；
（三）播放器由 #player 和 c-c 两个选择器规范其样式：#player 针对父元素，用于装载 c-c 自定义的子元素。c-c 调用一个关键帧动画（代码36行），flyout，2秒的运行周期、停留在结束时的状态，默认执行一次。c-c 其实运行两个关键帧动画，还有一个是 flyin，两个动画将交替运行，由JS代码在管理交互时指派。动画效果是粒子发散、收拢；
（四）JS代码简单说一下各个代码块的含义：
67行：声明 ccs 数组变量，用于存储粒子对象动态生成的 c-c 元素；
68~73行：生成 12 个 c-c 自定义元素（粒子），它们依次旋转不同的角度（角度的作用，通过 @keyframes 动画中rotate配套 translate 平移半径产生，产生预设的分布、分散、收拢效果；
75~80行：联动控制函数，各种需要响应音频播放暂停动作的预设在此制定；
82行：监听 audio控件的三个事件 oncanplay（可以播放状态）、onplaying（开始播放状态）、onpause（暂停状态），运行的是联动控制函数；
84行：播放器点击事件，仅控制音乐的播放/暂停；
86~93：引用与配置全屏插件。配置中，记得指定正确的帖子选择器名称、配置好必要的全屏按钮CSS属性。 本帖最后由 马黑黑 于 2024-6-27 12:18 编辑
补充一下：
47行代码 ：#tz:fullscreen #vid { height: calc(100% + 100px); }
这句的作用，是在全屏状态下，设置视频的高度，以便国宝办公能继续隐身进行。这句代码，:fullscreen 是一个全屏伪类，它的主人是 #tz 选择器，它作用于 #vid 选择器（针对使用了 id="vid" 的 HTML元素。
梦江南 发表于 2024-6-27 08:15
哇，好精彩！问好老师！
{:4_190:} 这个视频滤镜里的叠加，效果很赞~
敦煌飞天显得梦幻迷离，
光影的变化让整个画面活灵活现。。
有强烈的视觉冲击 --ww: 600px;--size: 110px;这两个分别是小播尺寸和球体尺寸。。
width: var(--ww);height: var(--ww);和
width: var(--size);height: var(--size);
设置区分。。这个也是新鲜的。。
还有整贴--width: 1700px;width: var(--width);
这三个宽度在这个贴子里分类得明明白白。。。
又学到一个新的知识点。。 VID里的高度：height: calc(100% + 60px);
井tz:fullscreen 井vid { height: calc(100% + 100px); }
两个都是对VID有影 响吧，为啥又设一次。 马黑黑 发表于 2024-6-27 08:20
本帖：
（一）CSS代码尽可能规范书写，便于阅读；
小白只能凭第一感觉，描述表面看到的。。
老师这个说几乎是后台控制方面的。看了很受益。。
代码学习还需要继续加强。{:4_170:} 南无月 发表于 2024-6-27 12:32
这个视频滤镜里的叠加，效果很赞~
敦煌飞天显得梦幻迷离，
光影的变化让整个画面活灵活现。。
高度赞扬了都{:4_170:} 马黑黑 发表于 2024-6-27 12:17
补充一下：
47行代码 ：#tz:fullscreen #vid { height: calc(100% + 100px); }
{:4_170:}现在明白为啥又设一次了。。全屏加了100PX;果然需要高一些，猫才能隐身。 南无月 发表于 2024-6-27 12:33
--ww: 600px;--size: 110px;这两个分别是小播尺寸和球体尺寸。。
width: var(--ww);height: var(--ww);和
...
CSS目前有少量几个函数可以使用，calc 是计算功能的额函数，非常实用 南无月 发表于 2024-6-27 12:35
小白只能凭第一感觉，描述表面看到的。。
老师这个说几乎是后台控制方面的。看了很受益。。
代码学习还 ...
CSS下个决心，学会一小半是木有问题的 马黑黑 发表于 2024-6-27 12:37
高度赞扬了都
进来就惊艳到了。。。真的像电影特效似的好看。。。
印象深刻。。这个{:4_170:}设计超级赞。 南无月 发表于 2024-6-27 12:33
VID里的高度：height: calc(100% + 60px);
井tz:fullscreen 井vid { height: calc(100% + 100px); }
两 ...
代码都不是一样样纸的。看五楼解释。 马黑黑 发表于 2024-6-27 12:38
CSS目前有少量几个函数可以使用，calc 是计算功能的额函数，非常实用
嗯哪，calc 这个脸熟。。看到它就知道要开始算啦 马黑黑 发表于 2024-6-27 12:39
CSS下个决心，学会一小半是木有问题的
这个决心占了90%{:4_173:} 本帖最后由 南无月 于 2024-6-27 12:44 编辑
马黑黑 发表于 2024-6-27 12:40
代码都不是一样样纸的。看五楼解释。
fullscreen这个东东管全屏，还有JS的名字也是它。。{:4_170:}
南无月 发表于 2024-6-27 12:42
这个决心占了90%
比例不低