|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
代码
- <style>
- #wrap {
- --size: 500px; /* 容器元素尺寸 */
- margin: 100px auto;
- width: var(--size);
- height: var(--size);
- border: 1px solid skyblue;
- border-radius: 50%;
- position: relative;
- }
- li-zi {
- position: absolute;
- width: 60px;
- height: 60px;
- border-radius: 50%;
- background: radial-gradient(at 20% 30%, tan 1%, skyblue);
- box-shadow: 4px 4px 8px gray;
- transform: rotate(var(--deg)) translate(var(--r));
- }
- </style>
- <section id="wrap" title="点击开始/暂停">
- <li-zi></li-zi>
- </section>
- <script>
- var lz = wrap.querySelector('li-zi'); // 获取粒子元素
- var angle = Math.floor(Math.random() * 360); // 粒子随机旋转角度
- var r = (wrap.clientWidth - lz.clientWidth) / 2 + lz.clientWidth / 2; // 粒子平移半径
- var rtime, isRun = false; // 请求关键帧id、粒子运行标识
- // 初始化粒子CSS数据
- lz.style.cssText += `
- left: calc(50% - ${lz.clientWidth / 2}px);
- top: calc(50% - ${lz.clientHeight / 2}px);
- --deg: ${angle}deg;
- --r: ${r}px;
- `;
- // 容器单击事件
- wrap.onclick = () => {
- isRun ? cancelAnimationFrame(rtime) : rtime = animate();
- isRun = !isRun;
- };
- // 循环运行动画
- function animate() {
- rtime = requestAnimationFrame(animate);
- lz.style.setProperty('--deg', angle + 'deg');
- angle = (angle + 0.5) % 360;
- }
- </script>
复制代码 效果在二楼
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
杨帆
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|