元素边缘溶蚀效果
<style>#mplayer{
margin: 50px auto;
width: 300px;
height: 300px;
border: 10px solid green;
border-radius: 50%;
display: grid;
place-items: center;
filter:url(#wavy) blur(0.5px);
--state: running;
}
#mplayer::before, #mplayer::after {
--delay: 0s;
position: absolute;
content: '';
width: 160px;
height: 160px;
border: 4px solid green;
animation: rot 8s var(--delay) infinite linear var(--state);
}
#mplayer::after { width: 100px; height: 100px; --delay: 1s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mplayer"></div>
<svg width="0" height="0">
<g><filter id="wavy">
<feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
<animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
</filter></g>
</svg>
查看代码请移步：
http://mahei.freeee.ml/art/show.php?st=1&sd=1&art=mahei_1680338197 这个效果太美了，就是不知道怎么运用到自己喜欢的界面中 小辣椒 发表于 2023-4-1 17:10
这个效果太美了，就是不知道怎么运用到自己喜欢的界面中
随便用呀 水中花 雨中悄然 发表于 2023-4-1 17:55
水中花
我确实用了这个效果做一个播放控制器，还真的用上了一朵花 马黑黑 发表于 2023-4-1 17:59
我确实用了这个效果做一个播放控制器，还真的用上了一朵花
{:4_199:}猜对了，加十分 雨中悄然 发表于 2023-4-1 18:01
猜对了，加十分
{:4_172:} 马黑黑 发表于 2023-4-1 18:59
期待老师作品 雨中悄然 发表于 2023-4-1 20:46
期待老师作品
这个会有。我只是发现自己速度太快，要忍一忍，两天到一个星期发一帖就行 我也在期待中！{:4_191:} 亦是金 发表于 2023-4-1 21:06
我也在期待中！
面包会有的 马黑黑 发表于 2023-4-1 21:02
这个会有。我只是发现自己速度太快，要忍一忍，两天到一个星期发一帖就行
{:4_170:}两天到一星期，不是同一间隔。差太多 雨中悄然 发表于 2023-4-1 21:56
两天到一星期，不是同一间隔。差太多
它们都是时间间隔 为你点赞，喝彩 庶民 发表于 2023-4-2 04:55
为你点赞，喝彩
感谢支持 马黑黑 发表于 2023-4-1 22:19
它们都是时间间隔
不用讨论间隔问题了 雨中悄然 发表于 2023-4-2 15:36
不用讨论间隔问题了
好的 马黑黑 发表于 2023-4-2 16:15
好的
{:4_170:}还是不用忍了 雨中悄然 发表于 2023-4-2 19:18
还是不用忍了
忍忍更健康