斯兰·天女散花
本帖最后由 马黑黑 于 2024-6-7 16:20 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:900px; background: url('https://638183.freep.cn/638183/t24/2/tnsh.jpg') no-repeat 0/cover; border: thick inset tan; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 0px); transform: rotateX(180deg) rotateY(180deg); mix-blend-mode: darken; }
.vid:nth-of-type(2) { top: 255px; left: 820px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 0 50px snow); transform-origin: 50% 100%; transition: 2s; }
.vid:nth-of-type(2):hover { transform: scale(1.5); }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1838042215" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec490dd620e4.mp4" loop muted disablePictureinPicture></video>
<video class="vid" id="vbtn" src="https://img.tukuppt.com/video_show/2422006/00/02/21/5b543cae5d231.mp4" autoplay loop muted disablePictureinPicture></video>
</div>
<script>
(function() {
const sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#vbtn',
lrc_css: 'left: 50%; top: 20px; transform: translate(-50%); color: rgba(255,255,255,.5); --bg: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6))',
});
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr = [, , , , , , , , , , , , , , , , , , , , , , ];
})();
</script>
本帖最后由 马黑黑 于 2024-6-7 16:19 编辑
帖子代码
<style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:900px; background: url('https://638183.freep.cn/638183/t24/2/tnsh.jpg') no-repeat 0/cover; border: thick inset tan; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 0px); transform: rotateX(180deg) rotateY(180deg); mix-blend-mode: darken; }
.vid:nth-of-type(2) { top: 255px; left: 820px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 0 50px snow); transform-origin: 50% 100%; transition: 2s; }
.vid:nth-of-type(2):hover { transform: scale(1.5); }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1838042215" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec490dd620e4.mp4" loop muted disablePictureinPicture></video>
<video class="vid" id="vbtn" src="https://img.tukuppt.com/video_show/2422006/00/02/21/5b543cae5d231.mp4" autoplay loop muted disablePictureinPicture></video>
</div>
<script>
(function() {
const sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#vbtn',
lrc_css: 'left: 50%; top: 20px; transform: translate(-50%); color: rgba(255,255,255,.5); --bg: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6))',
});
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr = [, , , , , , , , , , , , , , , , , , , , , , ];
})();
</script>
刚看到时就想问一下，之前的歌词模块里没有这一句的。
mydiv.oncontextmenu = (e) => e.preventDefault();
在这里有什么特别的作用么 图片和动态标题完美统一。
仙女手中透亮的花球，鼠标碰触变大始终在手指尖上。。{:4_199:}
非常漂亮。。 南无月 发表于 2024-6-7 12:51
刚看到时就想问一下，之前的歌词模块里没有这一句的。
mydiv.oncontextmenu = (e) => e.preventDefault(); ...
帖子禁用右键，主要为了屏蔽视频相关的菜单 南无月 发表于 2024-6-7 12:54
图片和动态标题完美统一。
仙女手中透亮的花球，鼠标碰触变大始终在手指尖上。。
非常漂亮。。
{:4_190:} 仙女手里有源源不断的花儿散出来，让这个世界变得如此缤纷。
仙女手里那个球状视频设置得漂亮{:4_199:} const lrcAr =，，，这个和之前的let 不一样了呢。
@keyframes rot { to { transform: rotate(var(--deg)); } }这个不知道是做什么用的。{:4_203:}
红影 发表于 2024-6-7 16:01
仙女手里有源源不断的花儿散出来，让这个世界变得如此缤纷。
仙女手里那个球状视频设置得漂亮
熊猫的东东都不差 红影 发表于 2024-6-7 16:08
const lrcAr =，，，这个和之前的let 不一样了呢。
@keyframes rot { to { transform: rotate(var(--deg ...
原来有个粒子效果，后来换了视频，忘了删除 马黑黑 发表于 2024-6-7 13:53
帖子禁用右键，主要为了屏蔽视频相关的菜单
这样，平时的带视频的不需要这么设一下子么 马黑黑 发表于 2024-6-7 13:53
{:4_199:}咖啡上了，准备加班的节奏 南无月 发表于 2024-6-7 18:03
这样，平时的带视频的不需要这么设一下子么
这看层级关系。裸露的视频就要设置一下，被覆盖的视频就没必要。 南无月 发表于 2024-6-7 18:04
咖啡上了，准备加班的节奏
今天补休 马黑黑 发表于 2024-6-7 16:18
熊猫的东东都不差
黑黑找的都好看{:4_187:} 马黑黑 发表于 2024-6-7 16:19
原来有个粒子效果，后来换了视频，忘了删除
哦哦，开始还弄粒子了啊，没看到，可惜{:4_173:} 红影 发表于 2024-6-7 18:52
哦哦，开始还弄粒子了啊，没看到，可惜
这帖本来不想用视频的，后来绝对效果不太理想 红影 发表于 2024-6-7 18:51
黑黑找的都好看
谁都可以找到 马黑黑 发表于 2024-6-7 18:05
今天补休
不用加班啦，那太好了。。{:4_199:} 马黑黑 发表于 2024-6-7 18:04
这看层级关系。裸露的视频就要设置一下，被覆盖的视频就没必要。
好象从来没想过这个东东。。
一般都是下层的吧，因为一般贴子都有小播在。层级总高不过小播。
{:4_173:}