临摹马导伪元素边框特效-奥云格日乐：草原的记忆
本帖最后由 执著 于 2024-6-28 21:00 编辑 <br /><br /><style>.bdbox {
margin: 60px -280px;
padding: 20px;
width: 1164px;
height: 640px;
border: 4px dotted gray;
position: relative;
background:url(https://pic.imgdb.cn/item/667e1775d9c307b7e9cb78db.jpg)no-repeat center/cover;
--offset: 12;
}
.bdbox::before, .bdbox::after {
position: absolute;
content: '';
width: calc(100% + var(--offset) * 2px);
height: calc(100% + var(--offset) * 2px);
border: 20px groove tan;
box-sizing: border-box;
transition: 2s;
}
.bdbox::before {
top: calc(var(--offset) * -1px);
left: calc(var(--offset) * -1px);
border-color: tan transparent transparent tan;
}
.bdbox::after {
bottom: calc(var(--offset) * -1px);
right: calc(var(--offset) * -1px);
border-color: transparent tan tan transparent;
}
.bdbox:hover::before, .bdbox:hover::after {
width: 30%;
height: 30%;
}
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) {top: -3px; left: -3px;width: 100%; height: calc(100% ); mix-blend-mode:overlay; }
.vid:nth-of-type(2) {left: 1050px;top: 550px; width: 100px; height: 100px; border-radius: 50%; mix-blend-mode: screen; }
</style>
<div id="papa">
<div class="bdbox">
<audio id="aud" src="https://cccimg.com/view.php/92561fa89c35b4f4ca2d4eedaa0b4eec.mp3" autoplay loop></audio>
<video class="vid" src="https://od.lk/s/NzBfMTcxNjE2Nzhf/%E6%97%A0%E6%B0%B4%E5%8D%B0-%E5%A5%A5%E4%BA%91%E6%A0%BC%E6%97%A5%E4%B9%90%E3%80%8A%E8%8D%89%E5%8E%9F%E4%B9%8B%E5%A4%9C%E3%80%8B%E8%A7%86%E9%A2%91.mp4" loop muted></video>
<video class="vid" src="https://od.lk/s/NzBfMTY3OTQ1NTlf/%E9%97%AA%E7%83%81%E7%9A%84%E4%BA%94%E8%A7%92%E6%98%9F.mp4" loop muted></video>
</div>
<script type="text/javascript">
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.cube',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
}
(function() {
let vids = document.querySelectorAll('.vid');
let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
本帖最后由 执著 于 2024-6-27 23:46 编辑
怎么发帖确定之后，系统又自动在背景图片地址两端加上了url！删掉又加。。。。请求老师帮我删除一下第9行background后面地址中的两个 。看能否正常显示，谢谢！
执著 发表于 2024-6-27 23:16
怎么发帖确定之后，系统又自动在背景图片地址两端加上了url！删掉又加。。。。请求老师帮我删除一下第9行ba ...
你发的链接是http的，花潮是安全模式https的链接，给你背景图片重新上传了，发现你视频也是http格式，免费空间没有视频可以上传我就没有办法了，电脑预览效果挺好的。
还有你发帖的时候下面附加选项中禁用链接识别打勾，第一个图片我给你重新上传了，你可以把链接修改一下 效果会出来的 看到了边框移动和歌词，听不到音乐也看不到视频呢。
具体原因见3楼。 小辣椒 发表于 2024-6-28 10:03
你发的链接是http的，花潮是安全模式https的链接，给你背景图片重新上传了，发现你视频也是http格式，免 ...
谢谢老师{:4_204:}！又犯了曾经出现过的过失！”罪不容赎“。那个系统自动添加url代码不知道是不是http的原因 小辣椒 发表于 2024-6-28 10:03
你发的链接是http的，花潮是安全模式https的链接，给你背景图片重新上传了，发现你视频也是http格式，免 ...
谢谢老师{:4_204:}！又犯了曾经出现过的过失！”罪不容赎“。那个系统自动添加url代码不知道是不是http的原因 红影 发表于 2024-6-28 15:13
看到了边框移动和歌词，听不到音乐也看不到视频呢。
具体原因见3楼。
我是 ”惯犯“了，又犯了同样的错误！显示可以正常显示了吗？ 红影 发表于 2024-6-28 15:13
看到了边框移动和歌词，听不到音乐也看不到视频呢。
具体原因见3楼。
我是 ”惯犯“了，又犯了同样的错误！显示可以正常显示了吗？ 执著 发表于 2024-6-28 21:05
谢谢老师！又犯了曾经出现过的过失！”罪不容赎“。那个系统自动添加url代码不知道是不是http的 ...
应该不是的，以后发帖就勾上就可以了，我现在发帖都勾的，因为我的链接也是有类似原因，开始我也是郁闷的，查了许多原因，最后查出是这个原因。http你可以上传免费的上传空间，也是https的去注册一个舍屋免费空间，个人感觉还是不错的 执著 发表于 2024-6-28 21:05
谢谢老师！又犯了曾经出现过的过失！”罪不容赎“。那个系统自动添加url代码不知道是不是http的 ...
千万别这么说，哪有这么严重的{:4_173:}，祝玩的开心{:4_187:} 执著 发表于 2024-6-28 21:15
我是 ”惯犯“了，又犯了同样的错误！显示可以正常显示了吗？
还是无法正常显示呢{:4_204:} 小辣椒 发表于 2024-6-29 15:28
应该不是的，以后发帖就勾上就可以了，我现在发帖都勾的，因为我的链接也是有类似原因，开始我也是郁闷的 ...
谢谢辣椒老师哈{:4_204:}，就是发帖时禁用链接识别打勾吧。记住了！对了，还有一个问题：我在回帖时，普通模式下按下面的“参与\回复主题”有时按几次都没有反应，然后，我就点击“高级模式”，但进入高级模式后，回复的内容就不见了，我也点击“参与\回复主题”，所以常常就出现回复两次的情况。不知道老师遇到过这种情况没有？ 红影 发表于 2024-6-29 22:29
还是无法正常显示呢
哦，我这里可以正常显示了，只是有时有点卡 小辣椒 发表于 2024-6-29 15:29
千万别这么说，哪有这么严重的，祝玩的开心
辣椒老师你那里显示正常了吗？影子还看不到正常的显示效果！ 执著 发表于 2024-6-29 22:42
哦，我这里可以正常显示了，只是有时有点卡
是的，能看到了{:4_187:}
页:
[1]