|
|

楼主 |
发表于 2022-4-22 19:59
|
显示全部楼层
原创代码:
- <style>
- .fan {
- --ss: 60px;
- left: 0px; top: 0px;
- width: var(--ss);
- height: var(--ss);
- background: linear-gradient(transparent 46%,green 47%, transparent 54%),
- linear-gradient(90deg,transparent 46%,green 47%, transparent 54%);
- border: calc(var(--ss) / 10) solid darkgreen;
- border-radius: 50%;
- position: relative;
- cursor: pointer;
- animation: rot .2s linear infinite;
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div class="fan"></div>
- <script>
- let flag = true;
- let fan = document.querySelector(".fan");
- let au = document.createElement("audio");
- au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/21/5d862db01b08a4bf0eac35a6f3b934a4.mp3";
- au.autoplay = flag;
- au.loop = true;
- fan.appendChild(au);
- if(!flag) fan.style.animationPlayState = "paused";
- fan.onclick = function(){
- flag ? (this.style.animationPlayState = "paused",au.pause(),flag = false) :
- (this.style.animationPlayState = "running",au.play(),flag = true);
- }
- </script>
复制代码
|
|