Schwimmende Katzen und Würfel

Ich konnte es kaum erwarten, etwas „freie“ Zeit zu haben, um meinem Projekt Styling hinzuzufügen. Etwas an Interaktivität verleiht der Seite Leben.

Du möchtest eine schwimmende Katze? Kein Problem. Ich habe mit KI ein Bild einer Katze erstellt und den Hintergrund in Illustrator „von Hand“ extrahiert, um einen schönen Ausschnitteffekt für mein PNG-Bild zu erzielen. Bam. Katze.

Lass ihn ein wenig bewegen, damit es aussieht, als würde er schweben. Eine meiner Lieblings-CSS-Animationen ist Orbit. Es ist wirklich nützlich und man kann viel damit machen.

---

Katze

In der Ansicht bringe ich das Bild meiner Katze ein und ordne ihr die Klasse „Katze“ zu

Jetzt baue ich in meiner CSS-Datei meinen Stil für „Katze“ auf. In cat nennen wir unsere Animation Orbit, wie unten gezeigt.

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
} 

Sie sehen hier, dass wir „die Katze beginnend in einem Winkel von 0 Grad drehen“, 15 Pixel vom x-Ursprung entfernt, beginnend bei 0 Grad.

Die Katze dreht einen vollständigen Kreis auf 360 Grad, bei einer Entfernung von 15 Pixeln, rundherum. Die zweite Drehung um -360 hebt die erste Drehung auf, um die Katze aufrecht zu halten. Es ist einfacher, wenn Sie nur die Animation sehen. XD.

Wir verschieben ihn nur geringfügig, da wir nicht wollen, dass er über die ganze Seite fliegt. Gerade genug, um spannend zu sein.

Ein bisschen nach links,



Etwas nach rechts.

Magie!

---

Würfel

Ich hatte zuvor gelernt, wie man mit CSS einen Cube erstellt. Das ist zwar in Ordnung und gut, aber mir kam heute die wilde Idee, den Würfel auf dynamische Weise wiederzuverwenden. Ich wollte die Würfelflächen in Echtzeit mit Daten füllen. Wie zum Beispiel die nächsten bevorstehenden Veranstaltungen. So etwas wie eine unterhaltsame Entdeckungssache auf der Landingpage. Warum nicht. Das ist aufregend.

Also baue ich zunächst das Skelett in der Ansicht auf. Unser Würfel braucht schließlich ein Zuhause.

Ich habe einige Optionsfelder, damit der Benutzer mit dem Cube interagieren kann.

Jedes Optionsfeld zeigt eine andere Würfelfläche.

Ich füge die Informationen, die ich auf jeder Seite anzeigen möchte, in einer Schleife hinzu:

  <div>




<hr>

<p>Handling the css is a bit of a dance. Especially with viewports and what not. This is not the answer for mobile but it will work and be functional on a bigger screen, LOL. I'm just gonna leave this here for you. Open to suggestions for handling a small screen size. <br>
</p>
<hr>



<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429456116557.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Floating Cats and Cubes"><br>
<br><br>
</p>

<pre class="brush:php;toolbar:false">
/*===========
rotating cube
==============*/

.cube-container {
  width: 30vw;
  height: 40vh;
  text-align: center;
  perspective: 100em;    
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  border: 5px solid transparent;  
  margin-top:100px; 
  display: block;
}

.cube-side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgb(64, 0, 148);
  border: 1px solid white;
  background-position: center;
  background-size: cover;
  border: 4px solid lime;
}

.cube-side:nth-child(1){
  transform: rotateY(0deg) translateZ(10em);
}

.cube-side:nth-child(2){
  transform: rotateY(90deg) translateZ(10em);
}

.cube-side:nth-child(3){
  transform: rotateY(180deg) translateZ(10em);
}

.cube-side:nth-child(4){
  transform: rotateY(-90deg) translateZ(10em);
}

.cube-side:nth-child(5){
  transform: rotateX(90deg) translateZ(9.75em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}

.cube-side:nth-child(6){
  transform: rotateX(-90deg) translateZ(9.3em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}


/* cube radio buttons */

.radio-button {
  transform: translateX(-50px);
}

.radio-button:checked ~ .cube{
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19. 1, 0.22, 1);
}

.radio-button:nth-child(1):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(20deg);
}

.radio-button:nth-child(2):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(180deg);
}

.radio-button:nth-child(3):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(90deg);
}

.radio-button:nth-child(4):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(-90deg);
}

.radio-button:nth-child(5):checked ~ .cube {
  transform: rotateX(-105deg) rotateY(0deg);
}

.radio-button:nth-child(6):checked ~ .cube {
  transform: rotateX(75deg) rotateY(0deg);
}

Jeder Knopf und jede Seite wird einzeln behandelt. Ich würde gerne eine elegantere Lösung sehen, falls es sie gibt.

Ich bin wirklich begeistert, dass es funktioniert hat.

Danke fürs Zuschauen!