|
|
楼主 |
发表于 2021-11-25 23:21
|
显示全部楼层
本帖最后由 加林森 于 2022-2-19 20:26 编辑
马黑黑 发表于 2021-11-25 23:16
老黑你怎么啦？
< style type="text/css">
.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/620241d22ab3f51d91132fea.jpg') no-repeat;
left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
content: "";
position: absolute;
width: 500px; height: 2px;
background: silver;
left: 300px; top: 230px;
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 { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox32 {
margin: 10px;
position: relative;
width: 32px; height: 32px;
line-height: 32px; font-size: 12px;
background: linear-gradient(blue,gray,red);
outline:none;
color: white;
border-radius: 50%;
text-align: center;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
cursor: pointer;
animation: rol linear 2s infinite;
}
.roBox32:hover { opacity: 0.8; }
.roBox32:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
|
|
楼主: 加林森
发表于 2021-11-25 22:22
显身卡
发表于 2021-11-25 22:28
发表于 2021-11-25 22:48
