Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

王林

Mar 05, 2021 pm 02:24 PM

css 动画抽奖

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Werfen wir zunächst einen Blick auf den endgültigen Betriebseffekt:

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Anhand der Darstellungen können wir erkennen, dass die Lotterie automatisch fortgesetzt wird und die Gewinninformationen angezeigt werden.

Dieser Effekt wird grundsätzlich mit CSS erreicht, ohne Bilder zu verwenden, sondern nur etwas JS hinzuzufügen. Auf Kompatibilität wurde überhaupt keine Rücksicht genommen.

Die spezifischen Schritte sind wie folgt:

Zeichnen Sie zuerst einen Drehteller

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>幸运大转盘</title>
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
  </style>
</head>
<body>
  <div>
    <div>
      <div>开始抽奖</div>
    </div>
  </div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt. Machen Sie sich keine Sorgen über die Farbanpassung, es kann hässlich sein. . .

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Dann ist es ein häufiges Problem, den kleinen Pfeil des Lotteriezeigers zu zeichnen. Dies wird erreicht, indem die Breite und Höhe auf 0 gesetzt und dann der Rand verwendet wird.

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Wie im Bild gezeigt, besteht das Rechteck aus vier Dreiecksrändern. Solange Sie die Farbe der anderen Seiten auf transparent einstellen, können Sie separate Dreiecke erhalten.

Hier wird das Dreieck durch das Pseudoelement dahinter implementiert und das Dreieck wird durch absolute Positionierung an der Spitze des kleinen Kreises in der Mitte positioniert.

.pointer::after {
      content: &#39;&#39;;
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
}

Nach dem Login kopieren

Es sieht jetzt aus wie ein Zeiger.

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Der nächste Schritt besteht darin, den Drehscheibenhintergrund umzusetzen. Verschiedene Sektoren entsprechen unterschiedlichen Preisen, daher besteht die Anforderung: eine Sektorform in jedem Winkel umzusetzen.

Sie können davon ausgehen, dass es dasselbe ist wie ein Dreieck, aber es fügt nur einen Randradius hinzu. Die Höhe ist der Radius des Kreises und die Breite ist tan(θ/2). ist nicht das Gleiche, wie ich es mir vorgestellt habe... (Möglicherweise muss es durchgeführt werden. Einige andere Operationen, um den Effekt zu erzielen, aber ich habe nicht damit gerechnet.

Schließlich habe ich mich an die Suchmaschine gewandt. Ich muss zugeben, dass Dalao ist wirklich großartig, qaq... Die Idee, linear-gradient zu implementieren, ist wirklich großartig, aber es gibt noch viel mehr, ich verstehe die komplizierte Implementierung nicht = =

Wie zeichnet man einen Kreissektor in CSS?

Segmentieren Sie einen Kreis mit CSS3

3 reinen CSS-Methoden, um einen 12-Farben-Regenbogen-Verlaufsring mit einer Aussparung in der Mitte zu realisieren

Die Implementierung ist Die Schnittfläche wird durch zwei Quadrate erhalten

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Ich denke das Das Zeichnen ist ziemlich gut :D

Ich habe keine Pseudoelemente verwendet, weil ich immer noch Text hinzufügen musste, ich habe ihn wirklich blind angepasst, wenn man Code schreibt = =

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sector {
            position: absolute;
            width: 100px;
            height: 200px;
            margin: 100px;
            border-radius: 0px 100px 100px 0;
            overflow: hidden;
            transform: rotate(-18deg);
        }
        .sector-inner {
            text-align: center;
            display: block;
            width: 40px;
            padding: 5px 3px 0 57px;
            height: 195px;
            background: #ffeab1;
            transform: translateX(-100px) rotate(36deg);
            transform-origin: right center;
            border-radius: 100px 0 0 100px;
        }
        .sector-inner span {
            display: block;
            transform-origin: center;
            transform: rotate(-19deg);
            color: #d46854;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <span>谢谢参与</span>
        </div>
    </div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt: eine kleine Fächerform mit Text~~

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

OK, jetzt schreibe ein paar Fächerformen und lege sie am Anfang auf den Drehteller

Jetzt ist der Code Jiang Zi Di~~ Es ist zu lang. Hehe, jetzt sieht es aus wie ein Lotterierad

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>幸运大转盘</title>
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      width: 100px;
      height: 200px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      left: 100px;
      top: 0px;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
    .pointer::after {
      content: &#39;&#39;;
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
    }
  </style>
</head>
<body>
  <div>
    <div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100话费</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100话费</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>10元话费</span>
        </div>
      </div>
      <div>开始抽奖</div>
    </div>
  </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

Jetzt ist der Drehteller-CSS-Teil im Grunde fertig. Wenn Sie auf den mittleren Zeiger klicken, kann der Zeiger die Geschwindigkeit der Animation steuern , und die Steigung ist die Geschwindigkeit, denn die Geschwindigkeit des Plattenspielers muss zuerst schnell sein und dann langsamer werden

http://cubic-bezier.com/#.2, Attribute in CSS hinzufügen

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>幸运大转盘</title>
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      width: 100px;
      height: 200px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      left: 100px;
      top: 0px;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
    .pointer::after {
      content: &#39;&#39;;
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
    }
  </style>
</head>
<body>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100话费</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100话费</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 50 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>10元话费</span>
        </div>
      </div>
      <div>开始抽奖</div>
    </div>
  </div>
</body>
</html>

Nach dem Login kopieren

Wenn Sie klicken, um die Lotterie zu starten, fügen Sie dem mittleren Zeiger einen Drehwinkel hinzu. Es besteht das Problem, dass die Wahrscheinlichkeit einer Ziehung für verschiedene Sektoren gleich ist Sollte ziemlich einfach sein, aber hauptsächlich weil ich CSS üben möchte, habe ich gerade etwas JS-Code geschrieben Was das Anzünden der Lichter angeht, müssen Sie CSS3-Animationen verwenden. Lassen Sie es uns zuerst lernen ist nicht viel Inhalt.

animation-name gibt den Animationsnamen an, Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

animation-duration gibt die Animationsdauer an,

animation-timing-function gibt an, dass die Animationsfunktion mit der Übergangsfunktion identisch ist,

animation-delay 指定动画延迟多久后执行，

animation-iteration-count 指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。

animation-direction 指定动画多次播放时，一次结束，下一次怎么接上一次，如图。

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。

animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。

使用关键字 keyframes 来定义一个动画。通过百分比指定其中任意几个状态。

尝试着写一下=。=

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 30px;
            width: 30px;
            animation: 1s twinkling 3, 100ms 3s twinkling 3;
        }
        @keyframes twinkling {
            50% { background: red; }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Nach dem Login kopieren

这是一个方块，先慢速闪三下，再快速闪三下，最后消失。

animation: 1s twinkling 3;

就相当于

animation-name: twinkling;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 3;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

Nach dem Login kopieren

效果：

Verwenden Sie CSS, um einen Lotterie-Animationseffekt zu implementieren

我觉得还可以:P 反正我只能写成这样了。

最后把动画加到转盘的灯上。完成代码（好像颜色变了，咳，那是因为我animation学了太久都掉色了）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>幸运大转盘</title>
  <style>
    * { /* 重置默认样式 */
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      user-select: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #ff5555;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light-twinkling {
      animation: 1s twinkling 3, 100ms 3s twinkling 3;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 100px;
      height: 200px;
      font-size: 14px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #ff5350;
      border-radius: 50%;
      border: 1px solid #ff5350;
      transition: transform 3s cubic-bezier(.2,.93,.43,1);
    }
    .pointer::after {
      content: &#39;&#39;;
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #ff5350;
      transform-origin: center;
    }
    .result {
      margin: 20px 60px;
    }

    @keyframes twinkling {
      50% { background: transparent; }
    }
  </style>
</head>
<body>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 5 0 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100元话费</span>
        </div>
      </div>
      <div>
        <div>
          <span> 5 0 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span>100元话费</span>
        </div>
      </div>
      <div>
        <div>
          <span>谢谢参与</span>
        </div>
      </div>
      <div>
        <div>
          <span> 5 0 积分</span>
        </div>
      </div>
      <div>
        <div>
          <span>10元话费</span>
        </div>
      </div>
      <div>开始抽奖</div>
    </div>
  </div>
  <div></div>

  <script>
    let getEle = document.getElementsByClassName.bind(document);
    let pointer = getEle(&#39;pointer&#39;)[0];
    let result = getEle(&#39;result&#39;)[0];
    let lights = Array.prototype.slice.call(getEle(&#39;light&#39;));

    let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了
    let reward = [&#39;谢谢参与&#39;, &#39;50积分&#39;, &#39;谢谢参与&#39;, &#39;100元话费&#39;, &#39;50积分&#39;, 
    &#39;谢谢参与&#39;, &#39;100元话费&#39;, &#39;谢谢参与&#39;, &#39;50积分&#39;, &#39;10元话费&#39;];

    // 根据随机角度获取奖励
    let getReward = (function() {
      currentDeg = 0;
      return function() {
        // 转三圈到四圈
        let rotateDeg = Math.random() * 360 + 1080;
        currentDeg += rotateDeg;
        let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
        return {
          deg: currentDeg,
          text: rewardText === &#39;谢谢参与&#39; ? &#39;很遗憾，您没有获得奖品。&#39; : &#39;恭喜获得: &#39; + rewardText
        }
      }
    })();

    pointer.addEventListener(&#39;click&#39;, () => {
      if (onRotation) return;
      console.log(&#39;开始抽奖&#39;);
      onRotation = true;
      lights.forEach(light => { light.className += &#39; light-twinkling&#39;; });
      let nextStatus = getReward();
      console.log(nextStatus)
      result.innerText = nextStatus.text;
      result.style.display = &#39;none&#39;;
      pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer.addEventListener(&#39;transitionend&#39;, () => {
      console.log(&#39;抽奖结束&#39;);
      setTimeout(() => { // 等闪烁三下结束
        onRotation = false;
        lights.forEach(light => { light.className = &#39;light&#39;; });
        result.style.display = &#39;block&#39;;
      }, 300);
    })
  </script>
</body>
</html>

Nach dem Login kopieren

原文链接：https://www.cnblogs.com/wenruo/p/9732704.html

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7488

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So überprüfen Sie das Bootstrap -Datum Apr 07, 2025 pm 03:06 PM

Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.

See all articles