论坛 › 动画音画 › 谷林清风

马黑黑 发表于 2024-2-8 12:25

谷林清风

本帖最后由 马黑黑 于 2024-2-8 12:29 编辑 <br /><br /><style>
#mydiv {
        margin: -70px 0 0 calc(50% - 593px);
        position: relative;
        display: grid;
        place-items: center;
        width: 1024px;
        height: 678px;
        background: url('https://638183.freep.cn/638183/t24/jpg/glqf.jpeg') no-repeat center/cover;
        box-shadow: 3px 3px 12px #000;
        z-index: 1;
}
#myplayer {
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        cursor: pointer;
        object-fit: cover;
        -webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') repeat 50% 50%;
        -webkit-mask-size: 1% 1%;
        animation: masksize 20s infinite alternate var(--state);
}
@keyframes masksize {
        to { -webkit-mask-size: 160% 160%; }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2036019644" autoplay loop></audio>
        <img id="myplayer" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t24/jpg/g54.jpg" />
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-2-8 12:26

帖子代码、
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        display: grid;
        place-items: center;
        width: 1024px;
        height: 678px;
        background: url('https://638183.freep.cn/638183/t24/jpg/glqf.jpeg') no-repeat center/cover;
        box-shadow: 3px 3px 12px #000;
        z-index: 1;
}
#myplayer {
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        cursor: pointer;
        object-fit: cover;
        -webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') repeat 50% 50%;
        -webkit-mask-size: 1% 1%;
        animation: masksize 20s infinite alternate var(--state);
}
@keyframes masksize {
        to { -webkit-mask-size: 160% 160%; }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2036019644" autoplay loop></audio>
        <img id="myplayer" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t24/jpg/g54.jpg" />
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-2-8 12:36

黑黑厉害，直接做成了svg图片，现在当图片放大时候没有锯齿了{:4_199:}

红影 发表于 2024-2-8 12:41

美女图也变成了圆形。其实原来的方形也好看呢。森林里修炼的女子，很清净{:4_187:}

红影 发表于 2024-2-8 12:46

前面那个是从大变小，这个是从小往大里变呢。

感觉svg 没有居中呢？感觉太靠上了，还需要再下来一点点才好。是制图时候的设定问题么？{:4_203:}

红影 发表于 2024-2-8 12:47

又是个新效果的制作，这个太美了{:4_199:}

马黑黑 发表于 2024-2-8 12:55

红影 发表于 2024-2-8 12:36
黑黑厉害，直接做成了svg图片，现在当图片放大时候没有锯齿了

svg就是这个好处

马黑黑 发表于 2024-2-8 12:57

红影 发表于 2024-2-8 12:46
前面那个是从大变小，这个是从小往大里变呢。

感觉svg 没有居中呢？感觉太靠上了，还需要再下来一点点才 ...

是的，这是用 Inkspace 做的，然后我只要它的路径，路径设计的有点奇怪，我安不好动画的中心

马黑黑 发表于 2024-2-8 12:58

红影 发表于 2024-2-8 12:47
又是个新效果的制作，这个太美了

我原来想用完全处我自己做的svg，也挺好：

https://638183.freep.cn/638183/web/svg/3star.svg

小辣椒 发表于 2024-2-8 13:59

哇塞，魔幻的场景出现了{:4_170:}

小辣椒 发表于 2024-2-8 14:00

而且代码不多，效果好炫酷{:4_199:}

小辣椒 发表于 2024-2-8 14:02

这个.svg图片可以这样玩啊{:4_199:}

醉美水芙蓉 发表于 2024-2-8 14:44

红影 发表于 2024-2-8 15:01

马黑黑 发表于 2024-2-8 12:55
svg就是这个好处

自己动手做的SVG，还是动画的，厉害了{:4_199:}

红影 发表于 2024-2-8 15:04

马黑黑 发表于 2024-2-8 12:57
是的，这是用 Inkspace 做的，然后我只要它的路径，路径设计的有点奇怪，我安不好动画的中心

这个设计的时候就不是以中心点为参照的缘故吧。

红影 发表于 2024-2-8 15:04

马黑黑 发表于 2024-2-8 12:58
我原来想用完全处我自己做的svg，也挺好：

这个也非常漂亮的，太赞了{:4_199:}

樵歌 发表于 2024-2-8 15:48

又是这小仙女在掐指念动六字真言了，俺们蝼蚁躲远点{:4_189:}

马黑黑 发表于 2024-2-8 17:38

樵歌 发表于 2024-2-8 15:48
又是这小仙女在掐指念动六字真言了，俺们蝼蚁躲远点

{:4_172:}

马黑黑 发表于 2024-2-8 17:38

小辣椒 发表于 2024-2-8 13:59
哇塞，魔幻的场景出现了

下午好

马黑黑 发表于 2024-2-8 17:39

小辣椒 发表于 2024-2-8 14:00
而且代码不多，效果好炫酷

这个是mask遮罩效果

查看完整版本: 谷林清风