谷林清风

马黑黑

马黑黑

帖子代码、

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         position: relative;
   
5.         display: grid;
   
6.         place-items: center;
   
7.         width: 1024px;
   
8.         height: 678px;
   
9.         background: url('https://638183.freep.cn/638183/t24/jpg/glqf.jpeg') no-repeat center/cover;
   
10.         box-shadow: 3px 3px 12px #000;
    
11.         z-index: 1;
    
12. }
    
13. #myplayer {
    
14.         position: absolute;
    
15.         width: 500px;
    
16.         height: 500px;
    
17.         border-radius: 50%;
    
18.         cursor: pointer;
    
19.         object-fit: cover;
    
20.         -webkit-mask: url('https://638183.freep.cn/638183/web/svg/6star.svg') repeat 50% 50%;
    
21.         -webkit-mask-size: 1% 1%;
    
22.         animation: masksize 20s infinite alternate var(--state);
    
23. }
    
24. @keyframes masksize {
    
25.         to { -webkit-mask-size: 160% 160%; }
    
26. }
    
27. </style>
    
28. 
    
29. <div id="mydiv">
    
30.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2036019644" autoplay loop></audio>
    
31.         <img id="myplayer" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t24/jpg/g54.jpg" />
    
32. </div>
    
33. 
    
34. <script>
    
35. var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
36. aud.addEventListener('pause', mState);
    
37. aud.addEventListener('playing',mState);
    
38. myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
39. </script>

复制代码

红影

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

红影

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

红影

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

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

红影

又是个新效果的制作，这个太美了

马黑黑

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

svg就是这个好处

马黑黑

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

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

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

马黑黑

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

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

                               
登录/注册后可看大图

小辣椒

哇塞，魔幻的场景出现了

小辣椒

而且代码不多，效果好炫酷

小辣椒

这个.svg图片可以这样玩啊

红影

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

自己动手做的SVG，还是动画的，厉害了

红影

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

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

红影

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

这个也非常漂亮的，太赞了

樵歌

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

马黑黑

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

马黑黑

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

下午好

马黑黑

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

这个是mask遮罩效果