|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
一、css-doodle版
<css-doodle>
:doodle {
--state: running;
@grid: 5 / 200px;
filter: drop-shadow(0 0 8px gray);
animation: rot 6s infinite linear var(--state);
}
:doodle(:hover) { --state: paused; }
@place-cell: center;
background: #333;
border-radius: 0 100%;
transform: rotate(calc(360deg / @size() * @i())) translate(40px);
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
二、原生CSS+HTML+JS版
<style>
#mydiv {
--state: running;
width: 200px;
height: 200px;
display: grid;
place-items: center;
filter: drop-shadow(0 0 8px gray);
position: relative;
animation: rot 6s infinite linear var(--state);
}
#mydiv:hover { --state: paused; }
#mydiv > span {
position: absolute;
width: 40px;
height: 40px;
background: #333;
border-radius: 0 100%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv"></div>
<script>
let total = 25;
Array.from({length: total}).forEach((item,key) => {
let span = document.createElement('span');
span.style.transform = `rotate(${360/total*key}deg) translate(40px)`;
mydiv.appendChild(span);
});
</script>
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
 雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 小辣椒
| + 50 |
+ 100 |
+ 50 |
很给力! |
查看全部评分
|
发表于 2023-4-21 12:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-4-21 18:15
发表于 2023-4-22 12:20
