本帖最后由 加林森 于 2022-4-20 11:09 编辑 <br /><br />子梦 发表于 2021-10-7 15:56
很早就喜欢的一首歌。谢谢分享！
谢谢子梦光临！{:4_187:}
<style>
.bgDiv {
margin: auto; width: 760px; height: 500px;
background-color: #050505;
background-image:
radial-gradient( white, rgba(255, 255, 255, 0.2) 2px, transparent 40px),
radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px),
radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
background-size: 580px 600px, 400px 400px, 300px 300px;
background-position: 0 0, 40px 60px, 130px 270px;
position: relative; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
animation: dark 10s linear infinite alternate;
}
.bgDiv img { position: absolute; width: 300px; height: 275px; right: 20px; bottom: 20px; opacity: .7; }
.ball {
width: 80px; height: 80px; left: 100px; top: 100px;
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); opacity: .45;
}
.ball div {
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); } }
@keyframes dark { to { opacity: 0.8; } }
</style>
<div class="bgDiv">
<div class="ball">
<div></div>
<div></div>
</div>
<img src="https://pic.imgdb.cn/item/625f6ee9239250f7c51ce92a.png" alt="" />
</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/19/c2c2898fe0ba602119b76f449a0bc972.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>
本帖最后由 加林森 于 2022-4-20 10:05 编辑
大猫咪 发表于 2021-10-7 14:07
好的，谢谢队长 节日快乐！ 注意休息， 开心每一天
好的好的，我们都开心啊。{:4_171:}
绿叶清舟 发表于 2021-10-7 15:51
喜欢陈瑞的声音，队长厉害
话说队长等猫一起去抓鱼吗
哈哈哈哈，猫如果见了鱼鱼还能活吗？{:4_189:}
加林森 发表于 2021-10-6 22:06
是啊。平平凡凡才是真！
接下来就等着元旦了，其他的没什么节日了吧。
红影 发表于 2021-10-7 21:23
接下来就等着元旦了，其他的没什么节日了吧。
还有一个老人节啊，重阳节！
大猫咪 发表于 2021-10-7 13:45
谢谢红影，猫来了下午好
抱抱猫猫，知道你在忙，惦念{:4_179:}
加林森 发表于 2021-10-7 21:35
还有一个老人节啊，重阳节！
这个节不放假的吧。
红影 发表于 2021-10-7 22:43
这个节不放假的吧。
应该不放假的。
红影 发表于 2021-10-7 22:08
抱抱猫猫，知道你在忙，惦念
谢谢红影，最近是特别忙，来的人多，辛苦了 {:4_204:}晚上好！
{:4_204:}{:4_191:}
大猫咪 发表于 2021-10-8 19:27
谢谢红影，最近是特别忙，来的人多，辛苦了 晚上好！
金秋十月，天气好，所以来的人多。抱抱猫猫，虽然忙自己的身体当心{:4_179:}
红影 发表于 2021-10-8 19:51
金秋十月，天气好，所以来的人多。抱抱猫猫，虽然忙自己的身体当心
嗯嗯，会的，红影也一样， 照顾好自己，安! {:4_179:}