探索之光 （套个黑黑的星系效果）
<style>#papa {
margin: auto;
width: 1216px;
height: 651px;
left: -315px;
top:150px;
background: lightblue url('https://pic.imgdb.cn/item/640da7f0f144a01007493587.gif') center/cover no-repeat;
box-shadow: 6px 3px 30px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#mplayer {
width: 60px;
height: 60px;
top:65px;
border-radius: 50%;
background: lightblue;
box-shadow: 5px 5px 30px black inset;
cursor: pointer;
animation: rot2d 8s infinite linear var(--state);
position: absolute;
transition: box-shadow .6s;
--state: running;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
border: 6px dotted Yellow;
border-radius: inherit;
transform: perspective(1000px) rotateY(45deg) rotateX(15deg);
animation: rot3d 10s infinite linear;
--angle: 360deg;
}
#mplayer:hover {
box-shadow: 5px 5px 60px Gold inset;
}
#mplayer::after {
top: -60px;
right: -60px;
bottom: -60px;
left: -60px;
--angle: -1080deg;
}
#papa:fullscreen #mplayer {
width: 100px;
height: 100px;
}
#papa:fullscreen #mplayer::before {
top: -70px;
right: -70px;
bottom: -70px;
left: -70px;
}
#papa:fullscreen #mplayer::after {
top: -80px;
right: -80px;
bottom: -80px;
left: -80px;
}
@keyframes rot2d {
to { transform: rotate(360deg); }
}
@keyframes rot3d {
to { transform: perspective(1000px) rotateY(45deg) rotateX(15deg) rotateZ(var(--angle)); }
}
#dt1{ position: absolute; width: 600px; height: 450px; top:50px;; left: 280px; }
#dt2{ position: absolute; width: 409px; height: 170px; top:420px;; left: 100px; }
</style>
<div id="papa">
<img id="dt1" src="https://pic.imgdb.cn/item/622d9e335baa1a80ab334d7f.gif" alt="" />
<img id="dt2" src="https://pic.imgdb.cn/item/640da813f144a0100749712e.png" alt="" />
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=432430455" autoplay loop></audio>
</div>
<script src="../../api/fullscreen.js"></script>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'pasued' : '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;'});
</script>
<br><br><br><br><br><br><br>
下午就做好了，感觉没有新意和创意，看见刚才红影的效果感觉我还是发了，没有对比咋会知道差距呢{:4_170:} 下午就做好了，感觉没有新意和创意，看见刚才红影的效果感觉我还是发了，没有对比咋会知道差距呢{:4_170:} 复读机了
已经好几个作业没有完成的，下个星期我也是不在的，所以缺课是肯定的了@马黑黑 小辣椒 发表于 2023-3-12 20:05
复读机了
已经好几个作业没有完成的，下个星期我也是不在的，所以缺课是肯定的了@马黑黑
没关系 匠心独运，效果很不错的 马黑黑 发表于 2023-3-12 20:17
没关系
那就好，心里一直在嘀咕的，来不及做作业，教程也是看不了了 马黑黑 发表于 2023-3-12 20:18
匠心独运，效果很不错的
这个效果太一般了就是套用黑黑代码的 有创意的，那两人在飞蝶{:4_173:} 樵歌 发表于 2023-3-12 20:28
有创意的，那两人在飞蝶
樵哥哥是探索。。。。{:4_170:} 拍案叫绝！{:4_199:} 梦油 发表于 2023-3-12 20:41
拍案叫绝！
谢谢梦油的支持{:4_187:} 画面和音乐给人以梦幻幽深的感觉……{:4_187:} 千羽 发表于 2023-3-12 21:00
画面和音乐给人以梦幻幽深的感觉……
有吗？我只是想突出探索的画面感 很漂亮的效果啊 遥相对应的两个灯笼散发出小亮点是离子效果吗，挺漂亮的，好像是洞口边峭壁上飞舞的蝙蝠，给画面笼罩上了神秘感，突出了探索二字{:4_181:} 小辣椒 发表于 2023-3-12 21:06
有吗？我只是想突出探索的画面感
是啊，目的达到了{:4_187:} 小辣椒 发表于 2023-3-12 20:28
这个效果太一般了就是套用黑黑代码的
不一般，很不一般 小辣椒 发表于 2023-3-12 20:27
那就好，心里一直在嘀咕的，来不及做作业，教程也是看不了了
该怎样怎样，没事 左边的环形小圆球是变色的吗，点击后就变黄色的了{:4_203:}