天外来物是彩色的{:4_187:}
雨中悄然 发表于 2023-3-5 18:19
天外来物是彩色的
不是黑白的
马黑黑 发表于 2023-3-5 18:26
不是黑白的
按道理应该是黑的
雨中悄然 发表于 2023-3-5 18:28
按道理应该是黑的
不，不黑，只是人的眼睛视力太有限了
马黑黑 发表于 2023-3-5 18:12
爱咋玩咋玩
中间那个一放图片跟着在外围一起转了
绿叶清舟 发表于 2023-3-5 20:46
中间那个一放图片跟着在外围一起转了
图片的 box-shadow 映射出来的也是大致形状的图片
马黑黑 发表于 2023-3-5 19:13
不，不黑，只是人的眼睛视力太有限了
有限可能有有限的道理。
雨中悄然 发表于 2023-3-6 12:24
有限可能有有限的道理。
所言极是
马黑黑 发表于 2023-3-6 12:31
所言极是
极是就是有道理{:4_170:}
雨中悄然 发表于 2023-3-6 22:27
极是就是有道理
说得对
马黑黑 发表于 2023-3-6 22:39
说得对
不对不说
雨中悄然 发表于 2023-3-7 07:45
不对不说
不说不对的
马黑黑 发表于 2023-3-5 21:03
图片的 box-shadow 映射出来的也是大致形状的图片
<style>
#papa {
--state: paused; --deg: 1turn;
margin: -80px 0 0 calc(50% - 633px);
display: grid;
place-items: center;
width: 1100px;
height: 700px;
background: lightblue url('https://pic.imgdb.cn/item/640487e0f144a01007ab0f73.jpg') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid lightblue;
color: lightblue;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
margin: 200px auto;
background: tan;
box-shadow: -10px -10px 30px black inset;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
animation: rot linear 3s infinite var(--state);
position: relative;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 40px;
height: 40px;
top: 50px;
box-shadow:
100px 100px 30px #846838,
-100px 100px 30px #1a130b,
100px -100px 30px #322715,
-100px -100px 30px #ef7416;
animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }
#mp {
position: absolute;
bottom: 330px;
mix-blend-mode: multiply;
animation: root linear 3s infinite var(--state);
}
@keyframes root {from{ transform: rotateY(360deg); }to { transform: rotateY(-360deg); } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="papa">
<div id="mplayer"> </div><imgid="mp" src="https://pic.imgdb.cn/item/6404899bf144a01007ad72d0.png" alt="" />
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1944209341.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>
中间的小人只会晃转不起来啊
绿叶清舟 发表于 2023-3-8 21:12
#papa {
--state: paused; --deg: 1turn;
margin: -80px 0 0 calc(50% - 633px);
...
好漂酿
看脚是在转的 了{:4_189:}
绿叶清舟 发表于 2023-3-8 21:14
看脚是在转的 了
挺好的
马黑黑 发表于 2023-3-8 21:26
挺好的
开始一直以为是在晃的
绿叶清舟 发表于 2023-3-8 21:35
开始一直以为是在晃的
错觉
天外天，有名物
烟雨客 发表于 2023-3-8 21:48
天外天，有名物
是也