本帖最后由 加林森 于 2022-2-13 07:26 编辑 <br /><br />小辣椒 发表于 2021-12-24 20:53
看见了，队长真棒
昨天晚上眼睛有点花了，看不太准了，今天重新调过才正常了。
<style type="text/css">
.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #ccc url('https://pic.imgdb.cn/item/620717c82ab3f51d9123af57.jpg') no-repeat;
left: -240px;
top: 150px
}
/* 父框和 .soBox 的伪元素共同样式 */
//.paBox::before, .paBox::after, .soBox::before, .soBox::after {
//content: "";
//position: absolute;
//width: 300px; height: 2px;
//background: BlueViolet;
//left: 750px; top: 150px;
//opacity: 0.1;
//transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}
@keyframes fly { 150% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox74 {
margin: 150px;
position: relative;
width：150px; height: 150px;
line-height: 150px; font-size: 100px;
background: linear-gradient(Red,Pink,Indigo);
outline:none;
color: Indigo;
border-radius: 150%;
text-align: center;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.45);
cursor: pointer;
animation: rol linear 2s infinite;
}
.roBox74:hover { opacity: 0.8; }
.roBox74:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div class="paBox">
<div class="soBox"></div>
<p style="position: absolute; left:350px; top:500px; color: #ae0101;"><marqueescrollamount="4" direction="left" ><b><font face=" size="4">帖赠小辣椒【古城新韵】</font></marquee></p>
<!-- 按钮 -->
<div id="roBox" class="roBox500" style="left:100.8%;top:100.9%;">●</div>
</div>
<audio id="ymusic" src="https://www.joy127.com/url/88624.mp3" autoplay="autoplay" loop="loop"></audio>
</script>