如何使用离子幻灯片在CSS中制作可旋转的圆
问题描述 投票：0回答：1
我正在尝试创建一个沿其拖动方向旋转的圆。圆的边界上应该有元素，因此元素应该旋转。例如，这些是元素：
<ion-slides [options]="slideOpts">
<ion-slide>
<div style="background: black; height: 100px; width: 100px"></div>
</ion-slide>
<ion-slide>
<div style="background: red; height: 100px; width: 100px"></div>
</ion-slide>
<ion-slide>
<div style="background: yellow; height: 100px; width: 100px"></div>
</ion-slide>
</ion-slides>这是我希望可以使情况更清晰的图像。
1个回答
0
投票
投票
根据Ionicframework Api slides可旋转event不可用。您可以使用CSS3自定义animation。您必须了解有关CSS Animation的更多信息。下面是示例代码。
<div class="proloader">
<div class="loader">
</div>
</div>
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.proloader{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9999;
background: #fff;
}
.proloader {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.proloader .loader {
animation: load5 1.1s infinite ease;
border-radius: 50%;
font-size: 25px;
height: 10px;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
width: 10px;
}
@keyframes load5 {
0%, 100% {
box-shadow: 0 -65px 0 0 #000, 25px -58px 0 0 #200, 45px -45px 0 0 #720000, 58px -24px 0 0 #a30000, 63px 0 0 0 #c00, 57px 24px 0 0 #f00, 44px 44px 0 0 #f33, 25px 57px 0 0 #ff5c5c, 0 63px 0 0 #ff7d7d, -24px 58px 0 0 #ff9797, -45px 45px 0 0 #ffacac, -58px 24px 0 0 #ffbdbd, -65px 0 0 0 #ffcaca, -58px -24px 0 0 #ffd5d5, -45px -45px 0 0 #fdd, -25px -58px 0 0 white;
}
6.25% {
box-shadow: 0 -65px 0 0 white, 25px -58px 0 0 #000, 45px -45px 0 0 #200, 58px -24px 0 0 #720000, 63px 0 0 0 #a30000, 57px 24px 0 0 #c00, 44px 44px 0 0 #f00, 25px 57px 0 0 #f33, 0 63px 0 0 #ff5c5c, -24px 58px 0 0 #ff7d7d, -45px 45px 0 0 #ff9797, -58px 24px 0 0 #ffacac, -65px 0 0 0 #ffbdbd, -58px -24px 0 0 #ffcaca, -45px -45px 0 0 #ffd5d5, -25px -58px 0 0 #fdd;
}
12.5% {
box-shadow: 0 -65px 0 0 #fdd, 25px -58px 0 0 white, 45px -45px 0 0 #000, 58px -24px 0 0 #200, 63px 0 0 0 #720000, 57px 24px 0 0 #a30000, 44px 44px 0 0 #c00, 25px 57px 0 0 #f00, 0 63px 0 0 #f33, -24px 58px 0 0 #ff5c5c, -45px 45px 0 0 #ff7d7d, -58px 24px 0 0 #ff9797, -65px 0 0 0 #ffacac, -58px -24px 0 0 #ffbdbd, -45px -45px 0 0 #ffcaca, -25px -58px 0 0 #ffd5d5;
}
18.75% {
box-shadow: 0 -65px 0 0 #ffd5d5, 25px -58px 0 0 #fdd, 45px -45px 0 0 white, 58px -24px 0 0 #000, 63px 0 0 0 #200, 57px 24px 0 0 #720000, 44px 44px 0 0 #a30000, 25px 57px 0 0 #c00, 0 63px 0 0 #f00, -24px 58px 0 0 #f33, -45px 45px 0 0 #ff5c5c, -58px 24px 0 0 #ff7d7d, -65px 0 0 0 #ff9797, -58px -24px 0 0 #ffacac, -45px -45px 0 0 #ffbdbd, -25px -58px 0 0 #ffcaca;
}
25% {
box-shadow: 0 -65px 0 0 #ffcaca, 25px -58px 0 0 #ffd5d5, 45px -45px 0 0 #fdd, 58px -24px 0 0 white, 63px 0 0 0 #000, 57px 24px 0 0 #200, 44px 44px 0 0 #720000, 25px 57px 0 0 #a30000, 0 63px 0 0 #c00, -24px 58px 0 0 #f00, -45px 45px 0 0 #f33, -58px 24px 0 0 #ff5c5c, -65px 0 0 0 #ff7d7d, -58px -24px 0 0 #ff9797, -45px -45px 0 0 #ffacac, -25px -58px 0 0 #ffbdbd;
}
31.25% {
box-shadow: 0 -65px 0 0 #ffbdbd, 25px -58px 0 0 #ffcaca, 45px -45px 0 0 #ffd5d5, 58px -24px 0 0 #fdd, 63px 0 0 0 white, 57px 24px 0 0 #000, 44px 44px 0 0 #200, 25px 57px 0 0 #720000, 0 63px 0 0 #a30000, -24px 58px 0 0 #c00, -45px 45px 0 0 #f00, -58px 24px 0 0 #f33, -65px 0 0 0 #ff5c5c, -58px -24px 0 0 #ff7d7d, -45px -45px 0 0 #ff9797, -25px -58px 0 0 #ffacac;
}
37.5% {
box-shadow: 0 -65px 0 0 #ffacac, 25px -58px 0 0 #ffbdbd, 45px -45px 0 0 #ffcaca, 58px -24px 0 0 #ffd5d5, 63px 0 0 0 #fdd, 57px 24px 0 0 white, 44px 44px 0 0 #000, 25px 57px 0 0 #200, 0 63px 0 0 #720000, -24px 58px 0 0 #a30000, -45px 45px 0 0 #c00, -58px 24px 0 0 #f00, -65px 0 0 0 #f33, -58px -24px 0 0 #ff5c5c, -45px -45px 0 0 #ff7d7d, -25px -58px 0 0 #ff9797;
}
43.75% {
box-shadow: 0 -65px 0 0 #ff9797, 25px -58px 0 0 #ffacac, 45px -45px 0 0 #ffbdbd, 58px -24px 0 0 #ffcaca, 63px 0 0 0 #ffd5d5, 57px 24px 0 0 #fdd, 44px 44px 0 0 white, 25px 57px 0 0 #000, 0 63px 0 0 #200, -24px 58px 0 0 #720000, -45px 45px 0 0 #a30000, -58px 24px 0 0 #c00, -65px 0 0 0 #f00, -58px -24px 0 0 #f33, -45px -45px 0 0 #ff5c5c, -25px -58px 0 0 #ff7d7d;
}
50% {
box-shadow: 0 -65px 0 0 #ff7d7d, 25px -58px 0 0 #ff9797, 45px -45px 0 0 #ffacac, 58px -24px 0 0 #ffbdbd, 63px 0 0 0 #ffcaca, 57px 24px 0 0 #ffd5d5, 44px 44px 0 0 #fdd, 25px 57px 0 0 white, 0 63px 0 0 #000, -24px 58px 0 0 #200, -45px 45px 0 0 #720000, -58px 24px 0 0 #a30000, -65px 0 0 0 #c00, -58px -24px 0 0 #f00, -45px -45px 0 0 #f33, -25px -58px 0 0 #ff5c5c;
}
56.25% {
box-shadow: 0 -65px 0 0 #ff5c5c, 25px -58px 0 0 #ff7d7d, 45px -45px 0 0 #ff9797, 58px -24px 0 0 #ffacac, 63px 0 0 0 #ffbdbd, 57px 24px 0 0 #ffcaca, 44px 44px 0 0 #ffd5d5, 25px 57px 0 0 #fdd, 0 63px 0 0 white, -24px 58px 0 0 #000, -45px 45px 0 0 #200, -58px 24px 0 0 #720000, -65px 0 0 0 #a30000, -58px -24px 0 0 #c00, -45px -45px 0 0 #f00, -25px -58px 0 0 #f33;
}
62.5% {
box-shadow: 0 -65px 0 0 #f33, 25px -58px 0 0 #ff5c5c, 45px -45px 0 0 #ff7d7d, 58px -24px 0 0 #ff9797, 63px 0 0 0 #ffacac, 57px 24px 0 0 #ffbdbd, 44px 44px 0 0 #ffcaca, 25px 57px 0 0 #ffd5d5, 0 63px 0 0 #fdd, -24px 58px 0 0 white, -45px 45px 0 0 #000, -58px 24px 0 0 #200, -65px 0 0 0 #720000, -58px -24px 0 0 #a30000, -45px -45px 0 0 #c00, -25px -58px 0 0 #f00;
}
68.75% {
box-shadow: 0 -65px 0 0 #f00, 25px -58px 0 0 #f33, 45px -45px 0 0 #ff5c5c, 58px -24px 0 0 #ff7d7d, 63px 0 0 0 #ff9797, 57px 24px 0 0 #ffacac, 44px 44px 0 0 #ffbdbd, 25px 57px 0 0 #ffcaca, 0 63px 0 0 #ffd5d5, -24px 58px 0 0 #fdd, -45px 45px 0 0 white, -58px 24px 0 0 #000, -65px 0 0 0 #200, -58px -24px 0 0 #720000, -45px -45px 0 0 #a30000, -25px -58px 0 0 #c00;
}
75% {
box-shadow: 0 -65px 0 0 #c00, 25px -58px 0 0 #f00, 45px -45px 0 0 #f33, 58px -24px 0 0 #ff5c5c, 63px 0 0 0 #ff7d7d, 57px 24px 0 0 #ff9797, 44px 44px 0 0 #ffacac, 25px 57px 0 0 #ffbdbd, 0 63px 0 0 #ffcaca, -24px 58px 0 0 #ffd5d5, -45px 45px 0 0 #fdd, -58px 24px 0 0 white, -65px 0 0 0 #000, -58px -24px 0 0 #200, -45px -45px 0 0 #720000, -25px -58px 0 0 #a30000;
}
81.25% {
box-shadow: 0 -65px 0 0 #a30000, 25px -58px 0 0 #c00, 45px -45px 0 0 #f00, 58px -24px 0 0 #f33, 63px 0 0 0 #ff5c5c, 57px 24px 0 0 #ff7d7d, 44px 44px 0 0 #ff9797, 25px 57px 0 0 #ffacac, 0 63px 0 0 #ffbdbd, -24px 58px 0 0 #ffcaca, -45px 45px 0 0 #ffd5d5, -58px 24px 0 0 #fdd, -65px 0 0 0 white, -58px -24px 0 0 #000, -45px -45px 0 0 #200, -25px -58px 0 0 #720000;
}
87.5% {
box-shadow: 0 -65px 0 0 #720000, 25px -58px 0 0 #a30000, 45px -45px 0 0 #c00, 58px -24px 0 0 #f00, 63px 0 0 0 #f33, 57px 24px 0 0 #ff5c5c, 44px 44px 0 0 #ff7d7d, 25px 57px 0 0 #ff9797, 0 63px 0 0 #ffacac, -24px 58px 0 0 #ffbdbd, -45px 45px 0 0 #ffcaca, -58px 24px 0 0 #ffd5d5, -65px 0 0 0 #fdd, -58px -24px 0 0 white, -45px -45px 0 0 #000, -25px -58px 0 0 #200;
}
93.75% {
box-shadow: 0 -65px 0 0 #200, 25px -58px 0 0 #720000, 45px -45px 0 0 #a30000, 58px -24px 0 0 #c00, 63px 0 0 0 #f00, 57px 24px 0 0 #f33, 44px 44px 0 0 #ff5c5c, 25px 57px 0 0 #ff7d7d, 0 63px 0 0 #ff9797, -24px 58px 0 0 #ffacac, -45px 45px 0 0 #ffbdbd, -58px 24px 0 0 #ffcaca, -65px 0 0 0 #ffd5d5, -58px -24px 0 0 #fdd, -45px -45px 0 0 white, -25px -58px 0 0 #000;
}
}
下面是代码段。
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.proloader{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9999;
background: #fff;
}
.proloader {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.proloader .loader {
animation: load5 1.1s infinite ease;
border-radius: 50%;
font-size: 25px;
height: 10px;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
width: 10px;
}
@keyframes load5 {
0%, 100% {
box-shadow: 0 -65px 0 0 #000, 25px -58px 0 0 #200, 45px -45px 0 0 #720000, 58px -24px 0 0 #a30000, 63px 0 0 0 #c00, 57px 24px 0 0 #f00, 44px 44px 0 0 #f33, 25px 57px 0 0 #ff5c5c, 0 63px 0 0 #ff7d7d, -24px 58px 0 0 #ff9797, -45px 45px 0 0 #ffacac, -58px 24px 0 0 #ffbdbd, -65px 0 0 0 #ffcaca, -58px -24px 0 0 #ffd5d5, -45px -45px 0 0 #fdd, -25px -58px 0 0 white;
}
6.25% {
box-shadow: 0 -65px 0 0 white, 25px -58px 0 0 #000, 45px -45px 0 0 #200, 58px -24px 0 0 #720000, 63px 0 0 0 #a30000, 57px 24px 0 0 #c00, 44px 44px 0 0 #f00, 25px 57px 0 0 #f33, 0 63px 0 0 #ff5c5c, -24px 58px 0 0 #ff7d7d, -45px 45px 0 0 #ff9797, -58px 24px 0 0 #ffacac, -65px 0 0 0 #ffbdbd, -58px -24px 0 0 #ffcaca, -45px -45px 0 0 #ffd5d5, -25px -58px 0 0 #fdd;
}
12.5% {
box-shadow: 0 -65px 0 0 #fdd, 25px -58px 0 0 white, 45px -45px 0 0 #000, 58px -24px 0 0 #200, 63px 0 0 0 #720000, 57px 24px 0 0 #a30000, 44px 44px 0 0 #c00, 25px 57px 0 0 #f00, 0 63px 0 0 #f33, -24px 58px 0 0 #ff5c5c, -45px 45px 0 0 #ff7d7d, -58px 24px 0 0 #ff9797, -65px 0 0 0 #ffacac, -58px -24px 0 0 #ffbdbd, -45px -45px 0 0 #ffcaca, -25px -58px 0 0 #ffd5d5;
}
18.75% {
box-shadow: 0 -65px 0 0 #ffd5d5, 25px -58px 0 0 #fdd, 45px -45px 0 0 white, 58px -24px 0 0 #000, 63px 0 0 0 #200, 57px 24px 0 0 #720000, 44px 44px 0 0 #a30000, 25px 57px 0 0 #c00, 0 63px 0 0 #f00, -24px 58px 0 0 #f33, -45px 45px 0 0 #ff5c5c, -58px 24px 0 0 #ff7d7d, -65px 0 0 0 #ff9797, -58px -24px 0 0 #ffacac, -45px -45px 0 0 #ffbdbd, -25px -58px 0 0 #ffcaca;
}
25% {
box-shadow: 0 -65px 0 0 #ffcaca, 25px -58px 0 0 #ffd5d5, 45px -45px 0 0 #fdd, 58px -24px 0 0 white, 63px 0 0 0 #000, 57px 24px 0 0 #200, 44px 44px 0 0 #720000, 25px 57px 0 0 #a30000, 0 63px 0 0 #c00, -24px 58px 0 0 #f00, -45px 45px 0 0 #f33, -58px 24px 0 0 #ff5c5c, -65px 0 0 0 #ff7d7d, -58px -24px 0 0 #ff9797, -45px -45px 0 0 #ffacac, -25px -58px 0 0 #ffbdbd;
}
31.25% {
box-shadow: 0 -65px 0 0 #ffbdbd, 25px -58px 0 0 #ffcaca, 45px -45px 0 0 #ffd5d5, 58px -24px 0 0 #fdd, 63px 0 0 0 white, 57px 24px 0 0 #000, 44px 44px 0 0 #200, 25px 57px 0 0 #720000, 0 63px 0 0 #a30000, -24px 58px 0 0 #c00, -45px 45px 0 0 #f00, -58px 24px 0 0 #f33, -65px 0 0 0 #ff5c5c, -58px -24px 0 0 #ff7d7d, -45px -45px 0 0 #ff9797, -25px -58px 0 0 #ffacac;
}
37.5% {
box-shadow: 0 -65px 0 0 #ffacac, 25px -58px 0 0 #ffbdbd, 45px -45px 0 0 #ffcaca, 58px -24px 0 0 #ffd5d5, 63px 0 0 0 #fdd, 57px 24px 0 0 white, 44px 44px 0 0 #000, 25px 57px 0 0 #200, 0 63px 0 0 #720000, -24px 58px 0 0 #a30000, -45px 45px 0 0 #c00, -58px 24px 0 0 #f00, -65px 0 0 0 #f33, -58px -24px 0 0 #ff5c5c, -45px -45px 0 0 #ff7d7d, -25px -58px 0 0 #ff9797;
}
43.75% {
box-shadow: 0 -65px 0 0 #ff9797, 25px -58px 0 0 #ffacac, 45px -45px 0 0 #ffbdbd, 58px -24px 0 0 #ffcaca, 63px 0 0 0 #ffd5d5, 57px 24px 0 0 #fdd, 44px 44px 0 0 white, 25px 57px 0 0 #000, 0 63px 0 0 #200, -24px 58px 0 0 #720000, -45px 45px 0 0 #a30000, -58px 24px 0 0 #c00, -65px 0 0 0 #f00, -58px -24px 0 0 #f33, -45px -45px 0 0 #ff5c5c, -25px -58px 0 0 #ff7d7d;
}
50% {
box-shadow: 0 -65px 0 0 #ff7d7d, 25px -58px 0 0 #ff9797, 45px -45px 0 0 #ffacac, 58px -24px 0 0 #ffbdbd, 63px 0 0 0 #ffcaca, 57px 24px 0 0 #ffd5d5, 44px 44px 0 0 #fdd, 25px 57px 0 0 white, 0 63px 0 0 #000, -24px 58px 0 0 #200, -45px 45px 0 0 #720000, -58px 24px 0 0 #a30000, -65px 0 0 0 #c00, -58px -24px 0 0 #f00, -45px -45px 0 0 #f33, -25px -58px 0 0 #ff5c5c;
}
56.25% {
box-shadow: 0 -65px 0 0 #ff5c5c, 25px -58px 0 0 #ff7d7d, 45px -45px 0 0 #ff9797, 58px -24px 0 0 #ffacac, 63px 0 0 0 #ffbdbd, 57px 24px 0 0 #ffcaca, 44px 44px 0 0 #ffd5d5, 25px 57px 0 0 #fdd, 0 63px 0 0 white, -24px 58px 0 0 #000, -45px 45px 0 0 #200, -58px 24px 0 0 #720000, -65px 0 0 0 #a30000, -58px -24px 0 0 #c00, -45px -45px 0 0 #f00, -25px -58px 0 0 #f33;
}
62.5% {
box-shadow: 0 -65px 0 0 #f33, 25px -58px 0 0 #ff5c5c, 45px -45px 0 0 #ff7d7d, 58px -24px 0 0 #ff9797, 63px 0 0 0 #ffacac, 57px 24px 0 0 #ffbdbd, 44px 44px 0 0 #ffcaca, 25px 57px 0 0 #ffd5d5, 0 63px 0 0 #fdd, -24px 58px 0 0 white, -45px 45px 0 0 #000, -58px 24px 0 0 #200, -65px 0 0 0 #720000, -58px -24px 0 0 #a30000, -45px -45px 0 0 #c00, -25px -58px 0 0 #f00;
}
68.75% {
box-shadow: 0 -65px 0 0 #f00, 25px -58px 0 0 #f33, 45px -45px 0 0 #ff5c5c, 58px -24px 0 0 #ff7d7d, 63px 0 0 0 #ff9797, 57px 24px 0 0 #ffacac, 44px 44px 0 0 #ffbdbd, 25px 57px 0 0 #ffcaca, 0 63px 0 0 #ffd5d5, -24px 58px 0 0 #fdd, -45px 45px 0 0 white, -58px 24px 0 0 #000, -65px 0 0 0 #200, -58px -24px 0 0 #720000, -45px -45px 0 0 #a30000, -25px -58px 0 0 #c00;
}
75% {
box-shadow: 0 -65px 0 0 #c00, 25px -58px 0 0 #f00, 45px -45px 0 0 #f33, 58px -24px 0 0 #ff5c5c, 63px 0 0 0 #ff7d7d, 57px 24px 0 0 #ff9797, 44px 44px 0 0 #ffacac, 25px 57px 0 0 #ffbdbd, 0 63px 0 0 #ffcaca, -24px 58px 0 0 #ffd5d5, -45px 45px 0 0 #fdd, -58px 24px 0 0 white, -65px 0 0 0 #000, -58px -24px 0 0 #200, -45px -45px 0 0 #720000, -25px -58px 0 0 #a30000;
}
81.25% {
box-shadow: 0 -65px 0 0 #a30000, 25px -58px 0 0 #c00, 45px -45px 0 0 #f00, 58px -24px 0 0 #f33, 63px 0 0 0 #ff5c5c, 57px 24px 0 0 #ff7d7d, 44px 44px 0 0 #ff9797, 25px 57px 0 0 #ffacac, 0 63px 0 0 #ffbdbd, -24px 58px 0 0 #ffcaca, -45px 45px 0 0 #ffd5d5, -58px 24px 0 0 #fdd, -65px 0 0 0 white, -58px -24px 0 0 #000, -45px -45px 0 0 #200, -25px -58px 0 0 #720000;
}
87.5% {
box-shadow: 0 -65px 0 0 #720000, 25px -58px 0 0 #a30000, 45px -45px 0 0 #c00, 58px -24px 0 0 #f00, 63px 0 0 0 #f33, 57px 24px 0 0 #ff5c5c, 44px 44px 0 0 #ff7d7d, 25px 57px 0 0 #ff9797, 0 63px 0 0 #ffacac, -24px 58px 0 0 #ffbdbd, -45px 45px 0 0 #ffcaca, -58px 24px 0 0 #ffd5d5, -65px 0 0 0 #fdd, -58px -24px 0 0 white, -45px -45px 0 0 #000, -25px -58px 0 0 #200;
}
93.75% {
box-shadow: 0 -65px 0 0 #200, 25px -58px 0 0 #720000, 45px -45px 0 0 #a30000, 58px -24px 0 0 #c00, 63px 0 0 0 #f00, 57px 24px 0 0 #f33, 44px 44px 0 0 #ff5c5c, 25px 57px 0 0 #ff7d7d, 0 63px 0 0 #ff9797, -24px 58px 0 0 #ffacac, -45px 45px 0 0 #ffbdbd, -58px 24px 0 0 #ffcaca, -65px 0 0 0 #ffd5d5, -58px -24px 0 0 #fdd, -45px -45px 0 0 white, -25px -58px 0 0 #000;
}
}<div class="proloader">
<div class="loader">
</div>
</div>最新问题
- 如何在docker上同时运行多个项目
- 尝试在 Angular 17 中的 AppComponent 中触发任何 http 请求时，未定义本地存储
- 如何将 Tailwind/Regular CSS 与 Wicked PDF 一起使用？
- 如何在CSS中模糊背景图像？
- 如何在 LookerStudio 上覆盖 Looker 的always_filter 默认过滤器？
- 为什么PL/SQL游标代码中输出会输出两次
- 使用 matplotlib 在 Python 中绘制子空间
- 如何使用Selenium获取Opta数据？
- Excel，复制/粘贴值而不更改活动工作簿/工作表？
- C++读取16位Wav文件
- 如何在PLSQL中找到数据是从哪里插入到表中的？
- 找到每个类别的最小值后的Rankx函数
- 在 .NET MAUI 中拖动错误的目标（图像）后，AllowDrop 不起作用
- 聚合来自多个不同类型的async_channel的消息以同步执行
- 使用预签名 url 将文件上传为二进制数据
- 如何使用 C# 中的 Graph API 上传 SharePoint 文档库中的文件和文件夹？
- 如何在应用程序图标中显示通知数量？
- Flutter App 发布后无法在手机上打开
- Jasper Report 组变量总和返回错误值
- 用单个表达式匹配多个替换模式
© www.soinside.com 2019 - 2024. All rights reserved.