Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta kesan degupan jantung yang ringkas (penjelasan kod terperinci)

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan css3 untuk menambah kesan animasi pada teks (dengan kod) ", saya memperkenalkan cara menggunakan css3 untuk menambah kesan animasi pada teks . Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta kesan degupan jantung yang ringkas Mari lihat cara melakukannya bersama-sama.

Untuk mencipta kesan degupan jantung yang ringkas dengan ccs, cuma tambah kotak dan gunakan sepenuhnya ccs untuk memaparkannya.

1. Mula-mula, kami menambah kotak visual pada halaman, mencipta dokumen baharu dan menulis kod terlebih dahulu menggunakan rentetan kod <div class="heart"></div> dalam teg <div> bingkai. <p>Contoh kod</p><pre class="brush:php;toolbar:false"> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><p> Kod html selesai. </p> <p>2. Jadikan hati dahulu, gunakan <code>css untuk menetapkan animasi dan gaya fon, dan gunakan atribut jantung untuk mengikat animasi pada elemen div Berikut ialah cara menulis kod teg head Tambah rentetan kod <style type></style> di antaranya dan kemudian masukkan *, li, a dalam teg gaya Jarak antara sempadan luar teks dan elemen ialah 0 , nilai lalai dan garis bawah dialih keluar contoh kod.

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3 Seterusnya, gunakan teg head untuk menambah rentetan kod heart dan kemudian masukkan atribut kedudukan relatif, lebar, tinggi dan jidar teks dalam style tag. Anda boleh mempunyai nilai 1 hingga 4, animasi peralihan, contoh kod

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
 
.heart{
position:relative;
width:100px; 
height:100px;
margin:100px;
animation:scale 1s linear infinite;  
/*名称 1s 匀速 无限循环*/

4. Akhirnya tetapkan animasi animation, di sini saya ingin mengatakan bahawa animation mesti digunakan bersama dengan @keyframes, teruskan menggunakannya Antara teg head, masukkan kedudukan mutlak, lebar, tinggi, warna, atribut style, isian sempadan luar, elemen diputar, contoh kod content

.heart:after,
.heart:before{
position:absolute;
width:70px;
height:100%;
background-color:red;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);

kesan kod

5 Kami biarkan ia berskala dua kali secara mendatar dan menegak

Contoh kod

@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }

Kesan kod<.>

Kesannya keluar, agak menarik Kawan-kawan yang nak cantik boleh ubah suai sendiri Lagipun estetika memang terhad semua orang bersetuju dengan estetika. Lagipun, saya tidak boleh diiktiraf oleh semua orang, saya hanya boleh bekerja keras untuk menyempurnakan kerja itu.

【Tamat】

Pembelajaran yang disyorkan:

Tutorial video CSS3