Langkah 2: <\/strong><\/p> Gunakan Langkah 3: <\/strong> <\/p> Gunakan atribut Kami telah selesai melukis hati, jadi bagaimanakah kami membuat hati terbang ke seluruh skrin, sebenarnya, kami hanya perlu memanggil jquery.js dan snowfall.jquery.js ke? mencapainya. Rendering adalah seperti berikut: <\/p> Kod lengkapnya adalah seperti berikut: <\/strong><\/p>transform <\/code> Atribut berputar kedua-dua unsur pseudo dengan negatif 45 darjah dan 45 darjah masing-masing, seperti yang ditunjukkan dalam rajah: <\/p>
<\/p>
.snowfall-flakes:before {\n -webkit-transform: rotate(-45deg);\n \/* Safari 和 Chrome *\/\n -moz-transform: rotate(-45deg);\n \/* Firefox *\/\n -ms-transform: rotate(-45deg);\n \/* IE 9 *\/\n -o-transform: rotate(-45deg);\n \/* Opera *\/\n transform: rotate(-45deg);\n }\n .snowfall-flakes:after {\n -webkit-transform: rotate(45deg);\n \/* Safari 和 Chrome *\/\n -moz-transform: rotate(45deg);\n \/* Firefox *\/\n -ms-transform: rotate(45deg);\n \/* IE 9 *\/\n -o-transform: rotate(45deg);\n \/* Opera *\/\n transform: rotate(45deg);\n }<\/pre>
left <\/code> untuk mengimbangi elemen pseudo
after <\/code> ke kiri dengan piksel tertentu, supaya dua elemen mikro bertindih separa untuk membentuk bentuk hati, seperti yang ditunjukkan dalam rajah: <\/p>
<\/p>
.snowfall-flakes:after {\n left: 13px;\n -webkit-transform: rotate(45deg);\n \/* Safari 和 Chrome *\/\n -moz-transform: rotate(45deg);\n \/* Firefox *\/\n -ms-transform: rotate(45deg);\n \/* IE 9 *\/\n -o-transform: rotate(45deg);\n \/* Opera *\/\n transform: rotate(45deg);\n }<\/pre>
<\/p>
\n\n\n\n \n