谢谢红影支持！
队长真会玩，帖子越做越棒了{:4_199:} 加林森 发表于 2022-3-27 21:02
哈哈，加点创意就行了。
是啊，加点创意效果特别好{:4_187:} 本帖最后由 加林森 于 2022-5-24 21:41 编辑 <br /><br />红影 发表于 2022-3-27 22:50
是啊，加点创意效果特别好
嗯嗯。
<style>
.stage{
margin: auto;
position: relative;
left: -214px;
width: 1024px;
height: 578px;
background:#666 url('https://pic.imgdb.cn/item/628cdd0009475431291e9bce.jpg');
perspective: 3000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
right: 20px;
top: 40px;
left: 20px;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.circle div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid Crimson;
border-radius: 50%;
padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
0%{ transform: rotateZ(30deg) rotateY(0turn);}
100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>
<div class="stage">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
var au = document.createElement('audio');
au.src = 'https://www.joy127.com/url/20684.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>
红影 发表于 2022-3-27 22:49
队长真会玩，帖子越做越棒了
是啊，要玩点新花样出来才行。 加林森 发表于 2022-3-27 23:06
是啊，要玩点新花样出来才行。
做出一个好帖子，自己看着也会喜欢呢。 红影 发表于 2022-3-28 11:07
做出一个好帖子，自己看着也会喜欢呢。
是的啊，感觉好就是真正的好了。 加林森 发表于 2022-3-28 11:28
是的啊，感觉好就是真正的好了。
这个帖子最棒了，真没想到用动图做滚动背景会有看电影一样的效果呢{:4_199:} 红影 发表于 2022-3-28 16:21
这个帖子最棒了，真没想到用动图做滚动背景会有看电影一样的效果呢
就是啊，我先也没有想到的，结果效果挺好的。 加林森 发表于 2022-3-28 16:46
就是啊，我先也没有想到的，结果效果挺好的。
这个是队长的学习里最成功的一个呢{:4_199:} 红影 发表于 2022-3-28 16:58
这个是队长的学习里最成功的一个呢
谢谢红影指点。{:4_187:} 加林森 发表于 2022-3-28 17:06
谢谢红影指点。
我哪指点过，都是队长自己做的啊{:4_173:} 红影 发表于 2022-3-28 19:17
我哪指点过，都是队长自己做的啊
我慢慢悟吧。 加林森 发表于 2022-3-28 19:22
我慢慢悟吧。
队长已经悟得很好了{:4_173:} 红影 发表于 2022-3-28 21:10
队长已经悟得很好了
谢谢光临啊。{:4_204:} 加林森 发表于 2022-3-28 21:11
谢谢光临啊。
队长客气了{:4_173:} 红影 发表于 2022-3-28 22:27
队长客气了
应该的应该的
页:
1
[2]