如何使用 ion-slides 在 css 中制作一個可旋轉的圓圈

Question

我正在嘗試創建一個圓圈，該圓圈將沿其拖動的方向旋轉。 圓的邊界上應該有元素，因此元素應該旋轉。 例如，這些是元素：

 <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>

這是我希望可以使事情更清楚的圖像。

Answer 1

根據Ionicframework Api幻燈片可旋轉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>

轉到CSS Animation Library或Animista 。