Chats et cubes flottants-tutoriel CSS-php.cn

Chats et cubes flottants

DDD

Libérer： 2024-12-16 04:29:12

original

895 Les gens l'ont consulté

J'avais hâte d'avoir du temps « libre » pour pouvoir ajouter du style à mon projet. Un peu d'interactivité ajoute de la vie à la page.

Vous voulez un chat flottant ? Aucun problème. J'ai créé une image d'un chat à l'aide de l'IA et extrait l'arrière-plan dans Illustrator "à la main" pour obtenir un bel effet de découpe pour mon image .png. Boum. Chat.

Faisons-le bouger un peu pour donner l'impression qu'il flotte. L'une de mes animations CSS préférées est l'orbite. C'est vraiment utile et vous pouvez faire beaucoup de choses avec.

Chat

Dans la vue, j'apporte l'image de mon chat et lui attribue la classe "chat"

<%= image_tag "favicon.png", alt : "stand du fournisseur", largeur : "40 %", hauteur : "40%", classe : "chat" %>

Maintenant, dans mon fichier CSS, je construis mon style pour "cat". En chat, nous appelons notre animation, orbite, comme indiqué ci-dessous.

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

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

Copier après la connexion

Vous voyez ici que nous « faisons pivoter le chat en commençant à un angle de 0 degré », à 15 pixels de l'origine x, en commençant à 0 degré.

Le chat fait un cercle complet à 360 degrés, à 15px de distance, tout le tour. La deuxième rotation de -360 annule la première rotation, pour maintenir le chat debout. C'est plus facile si vous voyez simplement l'animation. XD.

Nous le déplaçons juste un tout petit peu, car nous ne voulons pas qu'il vole partout sur la page. Juste assez pour être excitant.

Un peu à gauche,
Floating Cats and Cubes

Un peu à droite.

Magie!

Cube

J'avais déjà appris à créer un cube avec du CSS. Même si c'est très bien, j'ai eu aujourd'hui l'idée folle de réutiliser le cube de manière dynamique. Je voulais remplir les faces du cube avec des données en temps réel. Comme disons, les prochains événements à venir. Comme une découverte amusante sur la page de destination. Pourquoi pas. C'est passionnant.

Donc, comme toute chose, je construis le squelette dans la vue. Après tout, notre cube a besoin d’une maison.

J'ai quelques boutons radio pour que l'utilisateur puisse interagir avec le cube.

Chaque bouton radio affichera une face de cube différente.

J'ajoute les informations que je souhaite afficher sur chaque visage en boucle :

  <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="https://img.php.cn/upload/article/000/000/000/173429456116557.jpg" 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);
}

Copier après la connexion

Chaque bouton et chaque côté sont traités individuellement. J'aimerais voir une solution plus élégante si elle existe.

Je suis vraiment vraiment excité que cela ait fonctionné.

Merci d'avoir cherché !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!