朵拉 发表于 2023-3-21 19:53

坠入星空（马黑黑原创）

本帖最后由 朵拉 于 2023-3-21 20:05 编辑 <br /><br /><style>
#papa {
        left: -214px;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://pic.imgdb.cn/item/64199612a682492fcc9058ae.jpg') center/cover no-repeat;
        box-shadow: 6px 3px 30px #000;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#mplayer {
        width: 100px;
        height: 100px;
        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 snow;
        border-radius: inherit;
        transform: perspective(1000px) rotateY(45deg) rotateX(15deg);
        animation: rot3d 10s infinite linear;
        --angle: 360deg;
}
#mplayer:hover {
        box-shadow: 5px 5px 60px blue inset;
}
#mplayer::after {
        top: -60px;
        right: -60px;
        bottom: -60px;
        left: -60px;
        --angle: -1080deg;
}
#papa:fullscreen #mplayer {
        width: 150px;
        height: 150px;
}
#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)); }
}
</style>

<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1351520305" 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>

朵拉 发表于 2023-3-21 20:07

@马黑黑
马师 晚上好，学生学习了您的星系，请指教{:4_190:}

马黑黑 发表于 2023-3-21 20:20

朵拉 发表于 2023-3-21 20:07
@马黑黑
马师 晚上好，学生学习了您的星系，请指教

100√

红影 发表于 2023-3-21 20:45

很漂亮的制作。欣赏朵宝好帖{:4_187:}

朵拉 发表于 2023-3-21 21:33

马黑黑 发表于 2023-3-21 20:20
100√

这个分值有点高，学生继续学习~~

朵拉 发表于 2023-3-21 21:33

红影 发表于 2023-3-21 20:45
很漂亮的制作。欣赏朵宝好帖

谢谢影宝的欣赏，么么哒{:4_204:}

马黑黑 发表于 2023-3-21 21:40

朵拉 发表于 2023-3-21 21:33
这个分值有点高，学生继续学习~~

{:4_190:}

亦是金 发表于 2023-3-21 21:43

欣赏朵拉的美帖！学习了！{:4_187:}

焱鑫磊 发表于 2023-3-21 22:42

欣赏老师佳作！{:4_204:}

红影 发表于 2023-3-22 10:41

朵拉 发表于 2023-3-21 21:33
谢谢影宝的欣赏，么么哒

问好朵宝，上午好{:4_204:}
页: [1]
查看完整版本: 坠入星空（马黑黑原创）