论坛 › 欢乐水吧 › 狐伎

马黑黑 发表于 2022-6-4 09:29

狐伎

<style>
/* 地板 */
.floor {
        left: -20px;
        width: 800px;
        height: 600px;
        background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;
        background-size: 400px 400px;
        background-blend-mode: multiply;
        box-shadow: 4px 4px 8px 0 #444;
        display: flex;
        position: relative;
}
/* 球 */
.ball {
        margin: 100px auto 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
        position: relative;
        animation: up 1s linear infinite alternate;
}
/* 球的伪元素一：底部阴影 */
.ball::before {
        position: absolute;
        content: '';
        width: 100px;
        height: 50px;
        left: calc(50% - 50px);
        top: 300px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .1);
        filter: blur(1px);
        animation: down 1s linear infinite alternate;
}
/* 球的伪元素二：顶部光影 */
.ball::after {
        content: "";
        position: absolute;
        top: 1%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%); filter: blur(5px);
}
/* 图片定位与混合滤镜 */
.gif {
        position: absolute;
        bottom: 0;
        mix-blend-mode: multiply;
        cursor: pointer;
}
/* 关键帧动画：球上下弹跳 */
@keyframes up {
        to { transform: translateY(100px); }
}
/* 关键帧动画：阴影变化 */
@keyframes down {
        to { transform: translateY(-100px) scale(1.2); }
}
</style>

<div class="floor">
        <div class="ball"></div>
        <img class="gif" src="/data/attachment/forum/202206/04/092536dnh2hngqz2t2sfxe.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863430078.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let aud = document.querySelector('#aud'), gif = document.querySelector('.gif');
gif.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

马黑黑 发表于 2022-6-4 09:30

<style>
/* 地板 */
.floor {
        left: -20px;
        width: 800px;
        height: 600px;
        background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;
        background-size: 400px 400px;
        background-blend-mode: multiply;
        box-shadow: 4px 4px 8px 0 #444;
        display: flex;
        position: relative;
}
/* 球 */
.ball {
        margin: 100px auto 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
        position: relative;
        animation: up 1s linear infinite alternate;
}
/* 球的伪元素一：底部阴影 */
.ball::before {
        position: absolute;
        content: '';
        width: 100px;
        height: 50px;
        left: calc(50% - 50px);
        top: 300px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .1);
        filter: blur(1px);
        animation: down 1s linear infinite alternate;
}
/* 球的伪元素二：顶部光影 */
.ball::after {
        content: "";
        position: absolute;
        top: 1%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%); filter: blur(5px);
}
/* 图片定位与混合滤镜 */
.gif {
        position: absolute;
        bottom: 0;
        mix-blend-mode: multiply;
        cursor: pointer;
}
/* 关键帧动画：球上下弹跳 */
@keyframes up {
        to { transform: translateY(100px); }
}
/* 关键帧动画：阴影变化 */
@keyframes down {
        to { transform: translateY(-100px) scale(1.2); }
}
</style>

<div class="floor">
        <div class="ball"></div>
        <img class="gif" src="/data/attachment/forum/202206/04/092536dnh2hngqz2t2sfxe.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863430078.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let aud = document.querySelector('#aud'), gif = document.querySelector('.gif');
gif.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

马黑黑 发表于 2022-6-4 09:31

球是国际大佬画的，我没有做任何改动，仅加入其中一个伪元素做阴影、球和阴影的动画

红影 发表于 2022-6-4 09:51

那狐狸是吃兴奋剂了么，跳得那么嗨{:4_189:}

红影 发表于 2022-6-4 09:58

这球球和阴影真漂亮，谁能想到这么漂亮的图图是纯代码弄出来的，太神奇了{:4_187:}

加林森 发表于 2022-6-4 09:58

好漂亮的制作，老狐狸扭秧歌吗？{:4_199:}

红影 发表于 2022-6-4 10:00

这狐狸原来不是透明的。又一次见识了运用滤镜让动图背景变不可见的神奇了。
这样真方便，就不用刻意去寻找透明动图了{:4_199:}

红影 发表于 2022-6-4 10:12

背景设计也很漂亮，两个角度的线性渐变，使用滤镜混合，让各种交汇的颜色都发生了变化。
在黑黑这总能学到很多东西{:4_187:}

马黑黑 发表于 2022-6-4 10:18

红影 发表于 2022-6-4 10:12
背景设计也很漂亮，两个角度的线性渐变，使用滤镜混合，让各种交汇的颜色都发生了变化。
在黑黑这总能学到 ...

看样子你对代码的理解日臻成熟了

马黑黑 发表于 2022-6-4 10:19

红影 发表于 2022-6-4 09:51
那狐狸是吃兴奋剂了么，跳得那么嗨

这曲子叫狐伎，是伴奏。它是主角。

马黑黑 发表于 2022-6-4 10:19

红影 发表于 2022-6-4 10:00
这狐狸原来不是透明的。又一次见识了运用滤镜让动图背景变不可见的神奇了。
这样真方便，就不用刻意去寻找 ...

APP处理图形效果更好

马黑黑 发表于 2022-6-4 10:20

加林森 发表于 2022-6-4 09:58
好漂亮的制作，老狐狸扭秧歌吗？

什么老狐狸呀？还没成精的

马黑黑 发表于 2022-6-4 10:21

红影 发表于 2022-6-4 09:58
这球球和阴影真漂亮，谁能想到这么漂亮的图图是纯代码弄出来的，太神奇了

CSS还是不错的

加林森 发表于 2022-6-4 10:33

马黑黑 发表于 2022-6-4 10:20
什么老狐狸呀？还没成精的

难道吃了摇头丸了？跳得这么嗨。。。。。

马黑黑 发表于 2022-6-4 10:35

加林森 发表于 2022-6-4 10:33
难道吃了摇头丸了？跳得这么嗨。。。。。

不会的吧？这是违法的，狐狸不敢做那事

加林森 发表于 2022-6-4 10:38

马黑黑 发表于 2022-6-4 10:35
不会的吧？这是违法的，狐狸不敢做那事

我怎么看怎么都像吃了兴奋剂的。。。。{:4_189:}

马黑黑 发表于 2022-6-4 10:40

加林森 发表于 2022-6-4 10:38
我怎么看怎么都像吃了兴奋剂的。。。。

没关系，你去举报也没用，测不出问题来

醉美水芙蓉 发表于 2022-6-4 10:43

马黑黑 发表于 2022-6-4 10:44

醉美水芙蓉 发表于 2022-6-4 10:43
这只狐狸好嘚瑟！进来欣赏黑黑老师神奇的制作！

嘚瑟才有个性{:4_170:}

东篱闲人 发表于 2022-6-4 10:57

跳的疯狂！{:5_116:}

查看完整版本: 狐伎