我曾在别人面前炫耀过你 TO：千羽 （学习马老师半纸心事效果）
<style>
#papa {
margin: 150px 0 0 calc(50% - 781px);
display: grid;
place-items: center;
width: 1400px;
height: 788px;
background: lightblue url('https://i.mp3.wf/view.php/6b5f61b614956e2256135df9090b4a27.jpg ') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
overflow: hidden;
--state: running;
}
#vid {
position: absolute;
width: 100%;
height: 120%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .20;
}
.play_pic {
position: absolute;
cursor: pointer;
}
.play_pic:nth-of-type(1) {
width: 250px;
height: 171px;
left: 150px;top:570px;
opacity: .9;
transform: rotate(360deg);
transition: 1.5s;
}
.play_pic:nth-of-type(2) {
width: 155px;
height: 112px;
bottom: 45%;
right: 25.5%;
animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
to { transform: rotate(1turn); }
</style>
<div id="papa">
<audio id="aud" src="https://wx.ttt.dj/dy/20211014/001.mp3 " autoplay loop></audio>
<img class="play_pic" src=" https://i.mp3.wf/view.php/bb7bce506822b5bff8fbfdbcce4e6806.png alt="" />
<img class="play_pic" src="https://i.mp3.wf/view.php/06124a53f30bd7b1bf045a09cead7604.png" alt="" />
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/16/16/5e999dba03f91.mp4" autoplay="" loop="" muted="">
</div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 8%; left:35%;font-size: 1.8em;--bg: linear-gradient(rgba(135,206,250,.4),rgba(135,206,250,.7)); color: Lavender;',
});
});
for(i = 0; i < 1; i++) {
let img = document.createElement('img');
img.className = 'play_pic';
img.alt = '';
img.src = 'https://i.mp3.wf/view.php/450bb93a1fd27aa1264dc168c1e2759d.png';
img.style.cssText += `
left: 80%;top:50px;
width: ${i * 220 * 0.2 + 200 * 0.6}px;
height: ${i * 220 * 0.2 + 200 * 0.6}px;
filter: opacity(${Math.random() * 0.5 + 0.5}) hue-rotate(${Math.random() * 360}deg);
animation: rot ${Math.random() * 4 + 4}s ${Math.random() * -3}s infinite linear var(--state);
`;
papa.appendChild(img);
}
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br> @千羽
受小辣椒委托送上给小仙女的礼物{:4_170:} @马黑黑
马老师冬雨没有上传空间就用图片玩了这个效果，感觉许多还不懂，特别这个月亮我做好了图片，发出来的颜色不一样了，然后我重新做了几次都不行，现在变了这个旋转的空中危险物了 @小辣椒
任务完成，做的怎么样你可能不会满意，但我学到了一点还是有收获的 @红影
美女我学习做这个作业，你的代码我学习了再学习的，感谢聪明的美女 冬天的雨 发表于 2023-12-13 19:25
@马黑黑
马老师冬雨没有上传空间就用图片玩了这个效果，感觉许多还不懂，特别这个月亮我做好了图片，发 ...
{:4_189:}
元素对应的CSS用了滤镜，原始图片的样式都会受到影响，不是你图片做不好 大狼狗是隐藏效果的，自我感觉特别棒，想吓一下千羽的{:4_170:} 哇，这个的帽子也会转呢。冬小雨的制作漂亮{:4_199:} 冬天的雨 发表于 2023-12-13 19:25
@马黑黑
马老师冬雨没有上传空间就用图片玩了这个效果，感觉许多还不懂，特别这个月亮我做好了图片，发 ...
这个不是月亮吧，就是个漂亮的播放器按钮呢，很赞{:4_187:} 视频里虚幻的美人儿也漂亮，这个就是冬小雨炫耀的人儿吧{:4_173:} 冬天的雨 发表于 2023-12-13 19:22
@千羽
受小辣椒委托送上给小仙女的礼物
冬小雨说的小仙女是好几个吧，咋不把名字都标上啊{:4_173:} 这个制作特别完美，冬小雨厉害{:4_199:} 马黑黑 发表于 2023-12-13 19:28
元素对应的CSS用了滤镜，原始图片的样式都会受到影响，不是你图片做不好
马老师高看冬雨了 冬天的雨 发表于 2023-12-13 19:33
马老师高看冬雨了
{:4_176:} 红影 发表于 2023-12-13 19:28
哇，这个的帽子也会转呢。冬小雨的制作漂亮
帽子上是播放器按钮，这个效果特别的好，马老师一键都停止，控制3个图片，厉害的{:4_178:} 红影 发表于 2023-12-13 19:29
这个不是月亮吧，就是个漂亮的播放器按钮呢，很赞
想做月亮效果，可惜出来马老师的滤镜我不会调整，颜色不对我重新上去这个三不像的东西了{:4_170:} 红影 发表于 2023-12-13 19:31
冬小雨说的小仙女是好几个吧，咋不把名字都标上啊
美女，看标题看标题看标题，是送小千羽的{:4_170:} 红影 发表于 2023-12-13 19:32
这个制作特别完美，冬小雨厉害
再厉害没有美女厉害的，我看你的代码的{:4_170:} 冬天的雨 发表于 2023-12-13 19:27
@红影
美女我学习做这个作业，你的代码我学习了再学习的，感谢聪明的美女
不是吧，这个完全不同呢，非常漂亮{:4_187:} 红影 发表于 2023-12-13 19:30
视频里虚幻的美人儿也漂亮，这个就是冬小雨炫耀的人儿吧
{:4_170:}{:4_189:}{:4_196:}{:4_205:}{:4_172:}