|
|

楼主 |
发表于 2022-4-21 11:52
|
显示全部楼层
代码:(需要定位的修改.papa的left与top值)
- <style>
- .papa {
- width: 50px; height: 100px;
- left: 100px; top: 100px;
- background: #000; cursor: pointer;
- position: relative;border: 1px solid #000;
- animation: rot 4s linear infinite;
- }
- .papa::after {
- content: ''; position: absolute;
- left:2px; top: 2px; width: 3px; height: 3px;
- border: 2px solid #666; border-radius: 50%;
- background: #000;
- }
- .papa div {
- width: 100%; height: 100%;
- border: 1px solid; position: absolute; opacity: .85;
- }
- @keyframes rot { to {transform: rotate(1turn); } }
- </style>
- <div class="papa"></div>
- <script>
- let papa = document.querySelector(".papa");
- let au = document.createElement("audio");
- let dstr = "";
- let flag = true;
- au.src = "http://www.kumeiwp.com/sub/filestores/2022/02/03/c28be3aed0f506b785c7bf9bc6344b50.mp3";
- au.autoplay = flag;
- au.loop= true;
- for(j=0; j<6; j++){
- let cc = `#${Math.random().toString(16).substr(-6)}`;
- dstr += `<div style="border-color: ${cc}; transform: rotate(${j*30}deg);"></div>\n`;
- }
- papa.innerHTML = dstr;
- papa.appendChild(au);
- papa.onclick = function() {
- flag ? (this.style.animationPlayState = "paused",flag = false,au.pause()) : (this.style.animationPlayState = "running",flag = true,au.play());
- }
- let tt = setInterval(flash,100);
- function flash(){
- let c1 = `#${Math.random().toString(16).substr(-6)}`;
- let c2 = `#${Math.random().toString(16).substr(-6)}`;
- papa.style.background = `linear-gradient(120deg,${c1},${c2})`;
- }
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|