|
|

楼主 |
发表于 2022-5-5 22:01
|
显示全部楼层
代码分享:
- <style>
- .bgDiv {
- left: -202px;
- width: 1000px;
- height: 644px;
- background-color: rgb(0,0,0);
- background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
- background-blend-mode: overlay,difference,lighten;
- animation: magic 50s ease-in-out infinite alternate;
- position: relative;
- }
- .bgDiv img { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
- .mamaDiv {
- width: 100px;
- height: 100px;
- left: calc(50% - 50px);
- top: calc(50% - 50px);
- cursor: pointer;
- position: relative;
- animation: rot 4s linear infinite;
- }
- .sonDiv {
- width: inherit;
- height: inherit;
- border: 1px solid red;
- border-radius: 0 100%;
- position: absolute;
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- @keyframes magic { to { background-color: rgb(255,255,255); } }
- </style>
- <div class="bgDiv">
- <img src ="https://638183.freep.cn/638183/t22/51/xu.jpg" alt="" />
- <div class="mamaDiv"></div>
- </div>
- <script>
- let flag = true;
- let mama = document.querySelector('.mamaDiv');
- let divStr = '';
- for(j=0; j<5; j++){
- let color = Math.random().toString(16).substr(-6);
- divStr += `<div class='sonDiv' style='border-color: #${color}; transform: rotate(${j*72}deg)'></div>`;
- }
- mama.innerHTML += divStr;
- let au = document.createElement('audio');
- au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/11/022571741f9b48464c2594566749ddb9.mp3';
- au.autoplay = flag;
- au.loop = true;
- au.style.display = 'none';
- mama.appendChild(au);
- mama.onclick = function(){
- flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
- }
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|