纯音欣赏--酒香 TO：小辣椒
本帖最后由 冬天的雨 于 2023-2-22 20:28 编辑 <br /><br /><style>#papa {
--state: running;
margin: 80px 0 0 calc(50% - 800px);
width: 1400px;
height: 750px;
background: #3D255A url('https://pic.imgdb.cn/item/63f0f871f144a01007857320.jpg') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
position: relative;
z-index: 1;
}
.clock {
position: absolute;
width: 250px;
top: 20%;
left: 77%;
}
.clock:nth-of-type(2) {
transform: translate(100px,40px) scale(0.5) rotate(-15deg);
}
.clock:nth-of-type(3) {
transform: translate(100px,190px) scale(0.8) rotate(30deg);
}
.clock:nth-of-type(4) {
width: 200px;
top: 3%;
left: 21%;
cursor: pointer;
transform-origin: 88px 40px;
animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
from { transform: rotate(15deg); }
to { transform: rotate(-15deg); }
}
</style>
<div id="papa">
<img class="clock" src="https://pic.imgdb.cn/item/63f0f89ef144a0100785edac.png" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63f0f89ef144a0100785edac.png" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63f0f89ef144a0100785edac.png" alt="" />
<img id="mplayer" class="clock" src="https://pic.imgdb.cn/item/63f0f89ef144a0100785edac.png" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=567507658" loop autoplay></audio>
<script>
(function() {
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px; left: 50%; transform: translate(-50%);',});
})();
</script>
<br><br><br><br><br> @马黑黑
马老师批改作业{:4_170:} @小辣椒
一起喝酒 我一瓶，你酒仙3瓶{:4_170:} 小辣椒答应完成2个作业，虽然做的不好但好歹完成了{:4_170:} 要多多表扬鼓励{:4_172:} 下星期没有时间玩，你们速度快，冬雨不会一点点看看动作慢{:4_201:} 谢谢小辣椒，虽然我做出来了，也是有你的功劳{:4_170:} 让我们在欣赏的同时得到一种享受。 这个葫芦漂亮 冬天的雨 发表于 2023-2-19 00:23
@马黑黑
马老师批改作业
大笔一挥
10000√
酒好香哈
目测葫芦，葫芦柄顶端中心部分位于图片的xy坐标 88px、40px处，所以，定义摇摆支点的这句：
transform-origin: 66% 0;
可以改为：
transform-origin: 88px 40px;
酱紫会好看一些 马黑黑 发表于 2023-2-19 08:47
酒好香哈
目测葫芦，葫芦柄顶端中心部分位于图片的xy坐标 88px、40px处，所以，定义摇摆支点的这句：
马老师，我手机改的，看看，错了木有 手机看发现下面几个歌曲名称没有看完整，这个要重新图片修改，手机完成不了 冬天的雨 发表于 2023-2-19 09:49
马老师，我手机改的，看看，错了木有
没改对。你改后是这样：
transform-origin: 88% 40;
应该是这样：
transform-origin: 88px 40px; 这么多酒葫芦啊。冬小雨的这个摆动播放器的构思特别棒，很有仙幻剧的感觉。给冬小雨点赞{:4_199:} 冬天的雨 发表于 2023-2-19 00:23
@小辣椒
一起喝酒 我一瓶，你酒仙3瓶
你是酒仙的，怎么就喝一瓶？{:4_197:}
想害我{:4_170:} 冬天的雨 发表于 2023-2-19 00:24
小辣椒答应完成2个作业，虽然做的不好但好歹完成了
能够完成就应该赞一记的{:4_199:} 冬天的雨 发表于 2023-2-19 00:26
下星期没有时间玩，你们速度快，冬雨不会一点点看看动作慢
没有时间就不做，上来看看也是没关系的 冬天的雨 发表于 2023-2-19 00:34
谢谢小辣椒，虽然我做出来了，也是有你的功劳
你做的我有什么功劳，晓得你会做就是懒 太漂亮了，欣赏创意美贴
页:
[1]
2