|
|

楼主 |
发表于 2022-4-19 21:00
|
显示全部楼层
代码:
- <style>
- .ball { /* 球体 */
- margin: auto; margin-top: 80px; width: 80px; height: 80px;
- background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
- position: relative; border-radius: 50%;
- filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
- transform: skew(2deg); cursor: pointer;
- }
- .ball::before, .ball::after { content: ''; position: absolute; } /* 伪元素:修饰 */
- .ball::before { /* 伪元素一:高亮 */
- left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
- background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
- }
- .ball::after { /* 伪元素二:外边框 */
- left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
- border-radius: 20%; transform: rotate(45deg);
- }
- .ball div { /* 子元素共2个:动画 */
- position: absolute; border: 10px solid rgba(0,0,0,.45); border-radius: 50%;
- border-color: green lightgreen green darkgreen; opacity: .55;
- }
- .ball div:nth-child(1) { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite;}
- .ball div:nth-child(2) { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
- @keyframes rot { to { transform: rotate(1turn); } } /* 动画 转圈 */
- </style>
- <div class="ball">
- <div></div>
- <div></div>
- </div>
- <script>
- let flag = true;
- let ball = document.querySelector(".ball");
- let au = document.createElement("audio");
- au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/18/cb7a4bda166a1721b18c3829d27f9a50.mp3";
- au.autoplay = flag;
- au.loop= true;
- au.style.display = "none"
- ball.appendChild(au);
- ball.onclick = function(){
- if(flag) {
- Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
- au.pause();
- flag = false;
- } else {
- Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
- au.play();
- flag = true;
- }
- }
- </script>
复制代码 不想要外边框的,删掉CSS外边框部分代码即可,即:
.ball::after { /* 伪元素二:外边框 */
left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
border-radius: 20%; transform: rotate(45deg);
}
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|