信仰- 致大猫咪
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
border: 1px solid gray;
background: lightblue url('https://638183.freep.cn/638183/t23/2/wcat.webp') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000;
position: relative;
--clipPath: '';
}
#papa::before {
position: absolute;
content: '';
left: 775px;
top: 140px;
width: 100px;
height: 100px;
background: radial-gradient(gold,red);
opacity: .6;
transform: rotate(30deg);
clip-path: var(--clipPath);
}
#mplayer {
position: absolute;
width: 128px;
height: 128px;
left: calc(50% - 64px);
bottom: 0;
background: url('./pic/singingcat.gif');
mix-blend-mode: multiply;
opacity: 0;
cursor: pointer;
transition: opacity 2s;
}
</style>
<div id="papa">
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130909" autoplay="autoplay" loop="loop"></audio>
<script>
let mState = () => mplayer.style.background = 'url(' + (aud.paused ? 'https://638183.freep.cn/638183/t23/btn/singingcat1.png' : 'https://638183.freep.cn/638183/t23/btn/singingcat.gif') + ')';
let rosePath = (ww, num) => {
let points = 300;
let x0 = y0 = r = ww / 2, pathAr = [];
for (let i = 0; i <= points; i ++) {
let angle = i * 2 * Math.PI / points;
let x = x0 - r * Math.cos(angle) * Math.sin(num * angle);
let y = y0 - r * Math.sin(angle) * Math.sin(num * angle);
pathAr.push(x + 'px ' + y +'px');
}
return `polygon(${pathAr.join(', ')})`;
};
papa.style.setProperty('--clipPath',rosePath(100,6));
papa.addEventListener('mouseover', (e) => mplayer.style.opacity = '1');
papa.addEventListener('mouseout', (e) => mplayer.style.opacity = '0');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
哇塞~~~黑黑还是隐藏播放器{:4_199:} 猫猫生日快乐~~~永远20岁{:4_187:} @大猫咪 醉美水芙蓉 发表于 2023-7-12 20:46
欣赏老师佳作！同祝猫咪生日快乐！
晚上好 小辣椒 发表于 2023-7-12 21:18
猫猫生日快乐~~~永远20岁
{:4_173:}{:4_181:} 小辣椒 发表于 2023-7-12 21:18
哇塞~~~黑黑还是隐藏播放器
以前你也玩过的 马黑黑 发表于 2023-7-12 21:59
以前你也玩过的
上来就看见猫猫生日了，我得准备下了去做贺帖了
想套用个简单的{:4_170:} 小辣椒 发表于 2023-7-12 22:01
上来就看见猫猫生日了，我得准备下了去做贺帖了
想套用个简单的
这个够简单
let mState = () => mplayer.style.background = 'url(' + (aud.paused ? 'https://638183.freep.cn/638183/t23/btn/singingcat1.png' : 'https://638183.freep.cn/638183/t23/btn/singingcat.gif') + ')';
这句里居然可以出现图片{:4_170:}千变万化，眼花缭乱 祝大猫咪生日快乐！{:4_431:} 南无月 发表于 2023-7-12 22:12
let mState = () => mplayer.style.background = 'url(' + (aud.paused ? 'https://638183.freep.cn/6381 ...
它是酱紫理解：
元素.style.background 是JS设置元素的背景图。语法为：
元素标识.style.background = 'url(图片地址)';
我们要依据音乐的暂停/播放来更换图片，暂停是，图片一，播放时，图片二，所以加入一个三元判断语句：
元素标识.style.background = 'url(' + (aud.paused ? '图片一' : '图片二') + ')';
为便于识别，三元运算语句放在小括号里。 马黑黑 发表于 2023-7-12 22:18
它是酱紫理解：
元素.style.background 是JS设置元素的背景图。语法为：
所以，一个是动图一个是PNG静态图，难为老师想得出来这样的妙法。。{:4_178:} 南无月 发表于 2023-7-12 22:24
所以，一个是动图一个是PNG静态图，难为老师想得出来这样的妙法。。
这法子容易想到的你可以用 if 语句：
if(aud.paused) {
元素标识.style.background = ’url("图片一")';
} else {
元素标识.style.background = ’url("图片二")';
}
这个容易看懂。三元是 if 语句的语法糖。 马黑黑 发表于 2023-7-12 22:27
这法子容易想到的你可以用 if 语句：
if(aud.paused) {
果然这个折行的更容易理解。。
还有猫头上那朵花，固定不动？老想点点{:4_170:} 南无月 发表于 2023-7-12 22:42
果然这个折行的更容易理解。。
还有猫头上那朵花，固定不动？老想点点
那是饰物，没有安排它动，主要用意是让观者将鼠标移到帖子上，然后就看到隐藏的播放器可以安排 马黑黑 发表于 2023-7-12 22:47
那是饰物，没有安排它动，主要用意是让观者将鼠标移到帖子上，然后就看到隐藏的播放器可以安排
明白了，还是小妙招。。。 南无月 发表于 2023-7-12 22:56
明白了，还是小妙招。。。
{:4_189:} 这个猫咪是个猫王，但对朋友很是亲切友好。{:4_173:}