爱你无罪 TO：清舟 贺芳辰快乐！（学习黑黑 裸足女神效果）
<style>#papa {
margin: 150px 0 0 calc(50% - 881px);
width: 1600px;
height: 800px;
background:
url(' https://xlaj.cn/assets/file/zp/20240222203551.jpg') no-repeat center/cover,
url('https://xlaj.cn/assets/file/zp/20240222203520.gif') no-repeat 48% 0,
url('https://xlaj.cn/assets/file/zp/20240222203626.gif') no-repeat 100% 100%;
background-blend-mode: multiply, multiply;
box-shadow: 3px 3px 20px #000;
border: thick double Cornislk;
pointer-events: none;
z-index: 1;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 600px 1400px 80px 80px;
background: url('https://xlaj.cn/assets/file/zp/20240222203851.png') no-repeat center/cover;
border-radius: 50%;
box-shadow: inset 1000 0 40px rgba(255,0,0,.6), 0 0 12px rgba(0,0,0,.4);
filter: invert(0.2);
cursor: pointer;
pointer-events: auto;
transition: filter .75s;
animation: turn 6s linear infinite var(--state);
}
#papa:hover::before { filter: unset; }
@keyframes turn { to { transform : rotate(1turn); } }
#papa video { position: absolute; top: 0px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; opacity: .25; }
#dt1{ position: absolute; width:544px; height: 309px; left: 200px; top: 50px; }
</style>
<div id="papa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20240222203438.gif " />
<video src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d5e65d5535209ab6e36dc73596bbb1b_preview.mp4" loop muted></video>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/1514-audiofreehighqps/65/2F/GMCoOR4IjYjpACAAAAI6d0T0.mp3" autoplay loop></audio>
<script>
let 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: '#papa',
lrcAr: geci,
btn: '#before',
lrc_css: 'left: 48%; transform: translate(-50%);bottom: 60px; font-size: 2.2em;--bg: linear-gradient(rgba(230,230,250,.5),rgba(230,230,250,.25)); color: Snow;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(before.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
before.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
before.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
}
</script>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@緑叶清舟
清舟生日快乐！永远年轻，永远18岁{:4_172:} @马黑黑
黑黑这个裸足女神效果，昨天晚上那个播放器位置移动不好，最后就没有动了，留在原地{:4_170:} 其他就直接套用代码了，就上去了一个歌词同步，求速度，老歌曲再重新用{:4_173:} 感谢黑黑源码分享 @冬天的雨
冬雨这个你可以玩一次的 《爱你无悔》挺好听的。 小辣椒 发表于 2024-2-22 20:53
@冬天的雨
冬雨这个你可以玩一次的
又布置作业{:4_170:} 小辣椒 发表于 2024-2-22 20:51
@马黑黑
黑黑这个裸足女神效果，昨天晚上那个播放器位置移动不好，最后就没有动了，留在原地
俺的裸足哪有你这个漂酿{:4_170:} 梦油 发表于 2024-2-22 21:16
《爱你无悔》挺好听的。
梦油晚上好，谢谢欣赏，这首歌我也是特别喜欢的，第二次做了 醉美水芙蓉 发表于 2024-2-22 21:21
欣赏小辣椒带来的精彩！
问好水芙蓉，谢谢欣赏{:4_187:} 马黑黑 发表于 2024-2-22 21:38
又布置作业
{:4_172:}
直接套用冬雨应该可以的 马黑黑 发表于 2024-2-22 21:39
俺的裸足哪有你这个漂酿
昨天晚上做了几个图片，感觉没有几个漂亮的，这里就用了一个进去，收藏了以后可以用 小辣椒 发表于 2024-2-22 21:46
昨天晚上做了几个图片，感觉没有几个漂亮的，这里就用了一个进去，收藏了以后可以用
不错的 小辣椒 发表于 2024-2-22 21:45
直接套用冬雨应该可以的
{:4_181:}
冬雨还是有点能力的，会思考，不仅仅是套用 马黑黑 发表于 2024-2-22 21:48
冬雨还是有点能力的，会思考，不仅仅是套用
也是玩播放器算算有10年的人了 小辣椒 发表于 2024-2-22 21:54
也是玩播放器算算有10年的人了
老资格了 马黑黑 发表于 2024-2-22 21:48
不错的
就是要花时间{:4_198:} 小辣椒 发表于 2024-2-22 21:55
就是要花时间
那会的，但是付出有回报