无情的离开--探戈 （学习黑黑的猫的舞步效果）
<style>#mydiv {
left: -350px;
width: 1284px;
height: 740px;
background: #ccc url('https://xlaj.cn/assets/file/zp/20230621220506.gif ') no-repeat center / cover;
box-shadow: 0 0 6px #000;
pointer-events: none;
z-index: 1;
position: relative;
margin: 150px auto;
--clip: ''; --state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
left: 980px;
bottom: 50px;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
opacity: .95;
}
#mydiv::after {
background: #666666;
clip-path: var(--clip);
animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
background: url('https://xlaj.cn/assets/file/zp/20230621220534.gif') no-repeat center /cover;
filter: hue-rotate(145deg);
}
@keyframes scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(360deg) scale(.8); }
100% { transform: rotate(-360deg) scale(1); }
}
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230621220602.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let clipBox = (xx,points,thick) => {
let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
for(let i = 0; i <= points; i ++) {
let hudu = Math.PI / 180 * 360 / points * i;
let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
pointsAr.push(x1 + 'px ' + y1 + 'px');
}
pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
return `polygon(${pointsAr.join(',')})`;
};
mydiv.style.setProperty('--clip',clipBox(200,6,2));
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> @马黑黑
裁剪教程没有好好学习的，套用一个玩玩 精彩的舞曲，好看好听，欣赏点赞！{:4_204:} 帖子是漂酿滴，但是，希望能弄懂 clip-path 额 马黑黑 发表于 2023-6-21 22:24
帖子是漂酿滴，但是，希望能弄懂 clip-path 额
黑黑我是真不懂，就套用了代码 梦缘 发表于 2023-6-21 22:22
精彩的舞曲，好看好听，欣赏点赞！
谢谢梦缘欣赏{:4_171:} 马黑黑 发表于 2023-6-21 22:24
帖子是漂酿滴，但是，希望能弄懂 clip-path 额
我现在暂时还不能仔细去学习代码，就这个简单的制作我都现在才发帖，捣鼓了2个多小时的{:4_198:} 小辣椒 发表于 2023-6-21 22:31
我现在暂时还不能仔细去学习代码，就这个简单的制作我都现在才发帖，捣鼓了2个多小时的
用的时间也太多了 小辣椒 发表于 2023-6-21 22:29
黑黑我是真不懂，就套用了代码
不急慢慢来 马黑黑 发表于 2023-6-21 22:52
用的时间也太多了
这个图也是花时间{:4_203:} 马黑黑 发表于 2023-6-21 22:52
不急慢慢来
黑黑我下了 ，明天见 小辣椒 发表于 2023-6-21 22:53
这个图也是花时间
找找窍门，两分钟的事 小辣椒 发表于 2023-6-21 22:54
黑黑我下了 ，明天见
88 马黑黑 发表于 2023-6-21 22:54
找找窍门，两分钟的事
主要做了三次{:4_203:}
做好后重新去加了logo预览后感觉不够明显
然后重新再做加了歌曲名称
因为因为因为 所以我噶花时间。{:4_170:}
小辣椒 发表于 2023-6-21 23:05
主要做了三次
做好后重新去加了logo预览后感觉不够明显
{:4_203:} 小辣椒 发表于 2023-6-21 22:31
我现在暂时还不能仔细去学习代码，就这个简单的制作我都现在才发帖，捣鼓了2个多小时的
{:4_361:} 祝小辣椒朋友及家人端午安康！ 这个效果特别适合这首歌的节奏。亲爱的制作好棒{:4_199:} 电影一样的效果，漂亮之极，很是喜欢这样的制作{:4_187:}{:4_199:}