Kucing dan Kiub Terapung

Saya tidak sabar untuk mempunyai masa "luang" supaya saya boleh menambah gaya pada projek saya. Sesuatu tentang sedikit interaktiviti menambah kehidupan pada halaman.

Anda mahu kucing terapung? Tiada masalah. Saya membuat imej kucing menggunakan AI dan mengekstrak latar belakang dalam Illustator "dengan tangan" untuk mendapatkan kesan potong yang bagus untuk imej .png saya. Bam. Kucing.

Mari buat dia bergerak sedikit supaya kelihatan seperti terapung. Salah satu animasi CSS kegemaran saya ialah orbit. Ia sangat berguna dan anda boleh melakukan banyak perkara dengannya.

---

Kucing

Dalam pandangan, saya membawa imej kucing saya dan memberikannya kelas "kucing"

<%= image_tag "favicon.png", alt:"gerai penjual", lebar:"40%", tinggi:"40%", kelas:"kucing" %>

Kini, dalam fail css saya, saya membina gaya saya untuk "kucing". Dalam kucing, kami memanggil animasi kami, orbit, seperti yang ditunjukkan di bawah.

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

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

Anda lihat di sini bahawa kami "memusingkan kucing bermula pada sudut 0 darjah", pada jarak 15px dari asal-x, bermula pada 0 darjah.

Kucing itu membuat bulatan penuh hingga 360 darjah, pada jarak 15px, sepanjang jalan. Putaran kedua -360 membatalkan putaran pertama, untuk memastikan kucing tegak. Lebih mudah jika anda hanya melihat animasi. XD.

Kami hanya memindahkannya sedikit sahaja, kerana kami tidak mahu dia terbang ke seluruh halaman. Cukup untuk mengujakan.

Sedikit ke kiri,



Sedikit ke kanan.

Sihir!

---

kiub

Saya sebelum ini telah belajar cara membuat kiub dengan css. Walaupun itu bagus dan menarik, saya mendapat idea rambut liar hari ini tentang menggunakan semula kiub dengan cara yang dinamik. Saya ingin mengisi muka kubus dengan data dalam masa nyata. Seperti katakan, beberapa acara yang akan datang. Seperti mencari perkara yang menyeronokkan di halaman pendaratan. kenapa tidak. Ini memang mengujakan.

Oleh itu, saya membina rangka dalam pandangan. Cube kami memerlukan rumah selepas semua.

Saya mempunyai beberapa butang radio supaya pengguna boleh berinteraksi dengan kiub.

Setiap butang radio akan menunjukkan muka kubus yang berbeza.

Saya menambah maklumat yang ingin saya paparkan pada setiap muka dalam satu gelung:

  <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);
}

Setiap butang dan sisi dikendalikan secara individu. Saya ingin melihat penyelesaian yang lebih elegan jika ia wujud.

Saya sangat teruja ia berkesan.

Terima kasih kerana melihat!

Atas ialah kandungan terperinci Kucing dan Kiub Terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!