|
|

楼主 |
发表于 2023-1-2 19:40
|
显示全部楼层
代码
- <style>
- #papa {
- margin: auto;
- width: 740px;
- height: 600px;
- display: grid;
- place-items: center;
- perspective: 3000px;
- }
- #mplayer {
- --size: 400px;
- width: var(--size);
- height: var(--size);
- display: grid;
- place-items: center;
- position: relative;
- transform: rotateZ(15deg);
- transform-style: preserve-3d;
- animation: rot 10s infinite linear;
- cursor: pointer;
- }
- .mline {
- width: var(--size);
- height: var(--size);
- border-radius: 50%;
- border: 1px dotted snow;
- background: linear-gradient(180deg,black,tan,silver);
- position: absolute;
- opacity: .75;
- }
- @keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }
- </style>
- <div id="papa">
- <div id="mplayer"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1946730995.mp3" loop autoplay></audio>
- </div>
- <script>
- (function() {
- let total = 50;
- [...Array(total).keys()].forEach( (item,key) => {
- item = document.createElement('span');
- item.className = 'mline';
- item.style.transform = `rotateY(${360/total*key}deg)`;
- mplayer.appendChild(item);
- });
- mplayer.onclick = () => aud.paused ? (aud.play(), mplayer.style.animationPlayState = 'running') : (aud.pause(), mplayer.style.animationPlayState = 'paused');
- })();
- </script>
复制代码
|
|