Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 09:01 AM

使用 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!

Kenyataan

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

Artikel Berkaitan

Menu hamburger dengan sisi cangkuk reaksi dan komponen gayaApr 17, 2025 am 10:21 AM

Kita semua tahu apa menu hamburger, bukan? Apabila corak mula masuk ke dalam reka bentuk web, ia kedua -duanya dihina dan bertepuk tangan kerana minimalisnya

Kesan teks berkaca (dan berkelas)Apr 17, 2025 am 10:19 AM

Halaman pendaratan untuk Apple Arcade mempunyai kesan sejuk di mana beberapa teks "putih" mempunyai sejenis kesan lut. Anda dapat melihat beberapa warna latar belakang

Mendapatkan Netlify Media Besar PergiApr 17, 2025 am 10:17 AM

Saya hanya melakukan ini pada hari yang lain jadi saya fikir saya ' d blognya. Terdapat satu perkara yang dipanggil penyimpanan fail besar Git (Git LFS). Di sini ' s keseluruhan titik itu: ia tetap

Ujian berasaskan model dalam bertindak balas dengan mesin negeriApr 17, 2025 am 10:14 AM

Aplikasi ujian adalah penting untuk memastikan bahawa kod itu bebas ralat dan keperluan logik dipenuhi. Walau bagaimanapun, ujian menulis secara manual adalah

Biarkan ' s membina kedai e-dagang jamStack dengan fungsi NetlifyApr 17, 2025 am 10:13 AM

Ramai orang keliru tentang apa yang Jamstack. Akronim bermaksud JavaScript, API, dan Markup, tetapi sebenarnya, Jamstack tidak perlu memasukkan semua

Elemen melantun sekitar Viewport di CSSApr 17, 2025 am 10:12 AM

Biarkan ' s mengatakan bahawa anda akan melantun elemen di sekeliling skrin, sorta seperti screensaver sekolah lama atau pong atau sesuatu.

Bagaimana menyumbang kepada projek sumber terbukaApr 17, 2025 am 10:10 AM

Berikut ini akan mendapat sedikit pendapat dan bertujuan untuk membimbing seseorang dalam perjalanan mereka ke sumber terbuka. Sebagai prasyarat, anda harus mempunyai asas

NAVBAR NUDGING ON @KEYFRAMERSApr 17, 2025 am 10:09 AM

Saya menjadi tetamu pilihan di Keyframers pada hari yang lain. Kami melihat tembakan dribbble oleh Björgvin Pétur Sigurjónsson dan kemudian perlahan -lahan membinanya,

See all articles