Rumah > Artikel > hujung hadapan web > Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?

Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?

WBOYke hadapan: 2023-09-09 09:01:02575semak imbas

使用 CSS 从正方形制作彩虹心动画？

Kami boleh mencipta animasi menggunakan HTML, CSS dan JavaScript bersama-sama dan melaksanakan animasi ini pada halaman web atau tapak web. CSS menyediakan banyak sifat yang boleh kita gunakan untuk mencipta animasi, itulah sebabnya ia disyorkan untuk menggunakan CSS untuk penggayaan kerana ia menyediakan ciri yang berkuasa untuk pembangunan bahagian hadapan.

Dalam artikel ini, kami akan menggunakan CSS untuk mencipta bentuk hati yang berubah warna setiap 3 saat dan melakukannya dalam dua langkah menggunakan beberapa animasi.

Langkah untuk mencipta hati pelangi

Kami akan mencipta dua bahagian berbeza untuk badan dan kemudian mencipta dua kelas, satu daripadanya akan menjadi segi empat sama dan satu lagi bekas. Kami juga akan membuat bahagian CSS di mana kami akan menambah beberapa sifat pada badan dan memusatkan semua yang kami mahu paparkan. Kami akan menggunakan kod berikut untuk mencipta bekas.

Contoh

Dalam contoh di bawah, kami telah menambah beberapa sifat dan mencipta bentuk hati yang akan dimainkan oleh animasi. Kod di bawah memberikan output kod HTML dan CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: blue;
         transform: rotate(45deg);
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: red;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
      }
      .sqr::after {
         content: "";
         background-color: lightgreen;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

Bulatan kini mempunyai warna yang berbeza, kami mengekalkannya supaya kami boleh membezakan bulatan.

Kini, kita akan menghidupkan hati ini. Untuk melakukan ini, kami akan menambah pergerakan pada jantung dan kemudian menggunakan sifat kerangka utama untuk menukar warna. Warna hati akan berubah setiap kali bingkai baharu muncul.

Pergerakan hati yang dicipta akan berubah menjadi segi empat, dan kemudian berubah kembali membentuk hati. Kami akan melakukan ini dengan menggunakan sifat transformasi supaya segi empat sama boleh berubah menjadi bentuk hati. Sekarang kita telah membincangkan kaedah.

Contoh

Dalam kod di bawah, kami mula-mula menggunakan kod yang sama yang kami gunakan untuk membuat bekas dan bentuk hati, kemudian menambah beberapa bingkai utama di mana kami menetapkan warna daripada 0% kepada 100%. Warna setiap bingkai utama berubah supaya segi empat sama kelihatan berubah menjadi bentuk hati. Mari kita lihat output supaya kita faham apa yang berlaku selepas menggunakan kod tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: grey;
         transform: rotate(45deg);
         animation: beater 3s linear infinite;
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: maroon;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
         animation: beater 3s linear infinite;
      }
      .sqr::after {
         content: "";
         background-color: yellow;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
         animation: beater 3s linear infinite;
      }
      @keyframes beater {
         0% {
            background: red;
         }
         15% {
            background: orange;
         }
         30% {
            transform: scale(0.5);
            background: yellow;
         }
         45% {
            background: greenyellow;
         }
         60% {
            background: blue;
         }
         75% {
            background: indigo;
         }
         100% {
            background: violet;
         }
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

Pada mulanya output kita akan kelihatan seperti ini, segi empat sama, kemudian dalam setiap bingkai ia akan mencipta ilusi bahawa segi empat sama berubah menjadi bentuk hati, kemudian selepas transformasi ia akan bergelung semula dan berubah menjadi empat segi, setiap bingkai akan berubah menjadi bingkai warna yang berbeza. Hati yang lengkap kelihatan seperti ini.

Akhirnya, kita dapat melihat hati yang lengkap dari dataran.

Kesimpulan

Animasi dalam tapak web adalah perkara biasa hari ini dan animasi ini menentukan rupa dan rasa sebenar tapak web. Tujuan animasi ini biasanya untuk menarik minat pengguna atau memudahkan pengguna memahami sesuatu. CSS ialah alat yang sangat berkuasa yang membolehkan anda mencipta animasi ini dengan hanya beberapa baris kod. Animasi mengandungi bingkai di antara mereka dan kami menggunakan sifat bingkai utama dalam CSS untuk menukar bingkai.

Dalam artikel ini, kami belajar cara mencipta hati pelangi animasi daripada segi empat sama menggunakan CSS yang bertukar warna setiap 3 saat.

Atas ialah kandungan terperinci Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html 循环

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menggunakan sifat fleksibel CSS3 untuk mencipta kesan susun atur aliran air terjun?Artikel seterusnya：Bagaimana untuk menggunakan sifat fleksibel CSS3 untuk mencipta kesan susun atur aliran air terjun?

Artikel berkaitan

Lihat lagi