|
|

楼主 |
发表于 2023-3-16 07:21
|
显示全部楼层
代码
- <style>
- #mydiv {
- margin: 50px auto;
- width: 200px;
- height: 200px;
- background: lightgreen;
- box-shadow: 0 0 40px 20px hsla(240,80%,40%,.7) inset, 0 0 40px 20px hsla(0,0%,0%,.5);
- border-radius: 50%;
- border: 8px solid hsla(240,90%,50%,.9);
- display: grid;
- place-items: center;
- position: relative;
- cursor: pointer;
- opacity: .8;
- --state: paused;
- }
- #mydiv::before, #mydiv::after {
- position: absolute;
- content: '';
- width: 6px;
- height: 98px;
- background: snow;
- }
- #mydiv::before {
- top: 50%;
- background: hsla(240,80%,40%,.7);
- transform-origin: 50% 0;
- animation: swing .3s infinite alternate linear var(--state);
- }
- #mydiv::after {
- bottom: 50%;
- transform-origin: 50% 100%;
- animation: rot 30s infinite linear var(--state);
- }
- .ball {
- position: absolute;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background: hsla(240,60%,60%,.9);
- z-index: 2;
- }
- .ball:nth-of-type(2) {
- top: -8px;
- width: 8px;
- height: 8px;
- }
- @keyframes swing {
- from {transform: rotate(15deg); }
- to {transform: rotate(-15deg); }
- }
- @keyframes rot {
- to {transform: rotate(360deg); }
- }
- </style>
- <div id="mydiv"><span class="ball"></span><span class="ball"></span></div>
- <script>
- let flag = false;
- mydiv.addEventListener('click', () => {
- flag =! flag;
- mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
- });
- </script>
复制代码
|
|