请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
效果
代码
<style>
#wrap {
margin: 20px auto;
display: grid;
place-items: center;
width: var(--ww);
height: var(--ww);
cursor: pointer;
position: relative;
animation: rot 6s linear infinite var(--state);
--ww: 120px;
--size: 20px;
--state: running;
}
c-c {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: linear-gradient(orange, lightgreen);
box-shadow: 0 0 6px rgba(0, 0, 0, .1);
animation: flyout 3s forwards;
}
@keyframes flyout {
to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
to { transform: rotate(var(0)) translateY(0); }
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="wrap" title="暂停"></div>
<script>
let ccs = [], playing = false;
new Array(total = 12).fill(0).map((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `--deg: ${360 / total * k}deg`;
wrap.appendChild(c);
ccs.push(c);
});
wrap.onclick = () => {
wrap.style.setProperty('--state', ['paused', 'running'][+playing]);
wrap.title = ['播放','暂停'][+playing];
ccs.forEach(cc => cc.style.animationName = ['flyin','flyout'][+playing]);
playing = !playing;
};
</script>
| 
发表于 2024-6-26 19:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-6-26 19:43
楼主
发表于 2024-6-26 20:27
