hujung hadapan web
tutorial css
Menghidupkan hati pelangi dari segi empat sama menggunakan CSS?
Menghidupkan hati pelangi dari segi empat sama menggunakan 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
