kesan khas animasi transformasi riak elastik dinamik CSS3
Ini adalah kesan animasi transformasi riak elastik dinamik CSS3 yang unik dan kreatif Ia adalah kesan animasi riak pekeliling CSS3 yang tulen Walaupun ia tidak begitu praktikal, anda boleh belajar cara melaksanakannya untuk mencipta kesan yang anda inginkan.
Ini adalah kesan khas animasi transformasi riak elastik CSS3 yang unik dan kreatif Ia adalah kesan animasi riak pekeliling CSS3 tulen Walaupun ia tidak begitu praktikal, anda boleh belajar bagaimana untuk melaksanakannya untuk mencipta kesan yang anda inginkan.
<!doctype html>
<html>
<kepala>
<meta charset="utf-8">
<title>CSS3動(dòng)感彈性波紋變換動(dòng)畫(huà)特效</title>
<gaya>
badan {
? latar belakang: #1C1C1C;
? limpahan: tersembunyi;
}
.balut {
? jawatan: mutlak;
? atas: 50%;
? kiri: 50%;
? -webkit-transform: terjemah(-50%, -50%);
? ? ? ? ? ubah: terjemah(-50%, -50%);
? jidar-kiri: -150px;
}
ul {
? -webkit-transform: rotate3d(0, 1, 0, 45deg);
? ? ? ? ? transform: rotate3d(0, 1, 0, 45deg);
}
ul li {
? latar belakang: #1c1c1c;
? bayang kotak: masukkan 1px 1px 40px #19A598;
? jejari sempadan: 50%;
? jawatan: mutlak;
? atas: 50%;
? kiri: 50%;
}
li:anak ke-1(1) {
? sempadan: 1px pepejal #189c90;
? lebar: 30px;
? ketinggian: 30px;
? indeks-z: -1;
? jidar atas: -15px;
? jidar-kiri: 5px;
? -webkit-animasi: putaran 2s 0.2s tak terhingga;
? ? ? ? ? animasi: putaran 2s 0.2s tak terhingga;
}
li:anak ke-2(2) {
? sempadan: 1px pepejal #169388;
? lebar: 60px;
? ketinggian: 60px;
? indeks-z: -2;
? jidar atas: -30px;
? jidar-kiri: 10px;
? -webkit-animasi: putaran 2s 0.4s tak terhingga;
? ? ? ? ? animasi: putaran 2s 0.4s tak terhingga;
}
li:anak-anak(3) {
? sempadan: 1px pepejal #158a80;
? lebar: 90px;
? ketinggian: 90px;
? indeks-z: -3;
? jidar atas: -45px;
? jidar-kiri: 15px;
? -webkit-animasi: putaran 2s 0.6s tak terhingga;
? ? ? ? ? animasi: putaran 2s 0.6s tak terhingga;
}
li:anak ke-1(4) {
? sempadan: 1px pepejal #148277;
? lebar: 120px;
? ketinggian: 120px;
? indeks-z: -4;
? jidar atas: -60px;
? jidar-kiri: 20px;
? -webkit-animasi: putaran 2s 0.8s tak terhingga;
? ? ? ? ? animasi: putaran 2s 0.8s tak terhingga;
}
li:anak ke-1(5) {
? sempadan: 1px pepejal #12796f;
? lebar: 150px;
? ketinggian: 150px;
? indeks z: -5;
? jidar atas: -75px;
? jidar-kiri: 25px;
? -webkit-animasi: putaran 2s 1s tak terhingga;
? ? ? ? ? animasi: putaran 2s 1s tak terhingga;
}
li:anak ke-1(6) {
? sempadan: 1px pepejal #117067;
? lebar: 180px;
? ketinggian: 180px;
? indeks-z: -6;
? jidar atas: -90px;
? jidar-kiri: 30px;
? -webkit-animasi: putaran 2s 1.2s tak terhingga;
? ? ? ? ? animasi: putaran 2s 1.2s tak terhingga;
}
li:anak ke-1(7) {
? sempadan: 1px pepejal #10675f;
? lebar: 210px;
? ketinggian: 210px;
? indeks-z: -7;
? jidar atas: -105px;
? jidar-kiri: 35px;
? -webkit-animasi: putaran 2s 1.4s tak terhingga;
? ? ? ? ? animasi: putaran 2s 1.4s tak terhingga;
}
li:anak ke-1(8) {
? sempadan: 1px pepejal #0e5e57;
? lebar: 240px;
? ketinggian: 240px;
? indeks-z: -8;
? jidar atas: -120px;
? jidar-kiri: 40px;
? -webkit-animasi: putaran 2s 1.6s tak terhingga;
? ? ? ? ? animasi: putaran 2s 1.6s tak terhingga;
}
li:anak ke-1(9) {
? sempadan: 1px pepejal #0d554f;
? lebar: 270px;
? ketinggian: 270px;
? indeks-z: -9;
? jidar atas: -135px;
? jidar-kiri: 45px;
? -webkit-animasi: putaran 2s 1.8s tak terhingga;
? ? ? ? ? animasi: putaran 2s 1.8s tak terhingga;
}
li:anak ke-10 (10) {
? sempadan: 1px pepejal #0c4c46;
? lebar: 300px;
? ketinggian: 300px;
? indeks-z: -10;
? jidar atas: -150px;
? jidar-kiri: 50px;
? -webkit-animasi: putaran 2s 2s tak terhingga;
? ? ? ? ? animasi: putaran 2s 2s tak terhingga;
}
li:anak ke-(11) {
? sempadan: 1px pepejal #0a443e;
? lebar: 330px;
? ketinggian: 330px;
? indeks-z: -11;
? jidar atas: -165px;
? jidar-kiri: 55px;
? -webkit-animasi: putaran 2s 2.2s tak terhingga;
? ? ? ? ? animasi: putaran 2s 2.2s tak terhingga;
}
@-webkit-keyframes berputar {
? 0% {
? ? -webkit-transform: putar(0deg) skala(1);
? ? ? ? ? ? transform: putar(0deg) skala(1);
? }
? 50% {
? ? -webkit-transform: putar(360deg) skala(2);
? ? ? ? ? ? transform: putar(360deg) skala(2);
? }
? 100% {
? ? -webkit-transform: putar(0deg) skala(1);
? ? ? ? ? ? transform: putar(0deg) skala(1);
? }
}
@keyframes berputar {
? 0% {
? ? -webkit-transform: putar(0deg) skala(1);
? ? ? ? ? ? transform: putar(0deg) skala(1);
? }
? 50% {
? ? -webkit-transform: putar(360deg) skala(2);
? ? ? ? ? ? transform: putar(360deg) skala(2);
? }
? 100% {
? ? -webkit-transform: putar(0deg) skala(1);
? ? ? ? ? ? transform: putar(0deg) skala(1);
? }
}
ul li {
? gaya senarai: tiada;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div style="text-align:center;margin:30px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">?
</div>
</badan>
</html>
Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn
Artikel Berkaitan
Bagaimanakah saya boleh mencipta kesan fade-out menggunakan peralihan CSS3?
28 Oct 2024
Peralihan CSS3: Mencapai Kesan Fade-OutDalam CSS3, peralihan menawarkan alat yang berkuasa untuk mencipta kesan visual dinamik. Antara kesan ini ialah...
Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?
27 Oct 2024
Peralihan CSS3 - Kesan Fade outDalam CSS3, mencapai kesan fade-out boleh dicapai melalui penggunaan animasi bingkai utama. Namun, ia...
Bagaimanakah Saya Boleh Mencipta Kesan Marquee CSS3 Responsif Tanpa Nilai Berkod Keras?
06 Dec 2024
Kesan Marquee dalam CSS3: Mengelakkan Nilai Khusus untuk Penyesuaian TeksDalam animasi CSS3, selalunya wajar untuk mencipta kesan marquee, di mana teks...
Bagaimana Anda Boleh Meniru Kesan CSS3 dalam Pelayar IE Lama?
28 Oct 2024
Mencontohi Keajaiban Kesan CSS3 dalam Pelayar IE Lama Walaupun CSS3 membawa pelbagai kesan bergaya kepada reka bentuk web, pelayar lama seperti...
Mengapa animasi slaid naik saya menggunakan CSS3 @keyframes tidak berfungsi?
28 Oct 2024
Peralihan CSS3 - Kesan Fade OutMenggunakan CSS3, anda boleh melaksanakan kesan fade-out dengan mudah untuk meningkatkan pengalaman pengguna. Namun, jika anda menemui...
Peralihan CSS: Adakah 'peralihan: semua' atau 'peralihan: x' Lebih Cepat?
03 Dec 2024
Peralihan CSS3: Kesan Prestasi "peralihan: semua" lwn. "peralihan: x"Mengenai kecekapan prestasi peralihan CSS3, satu...
Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?
05 Apr 2025
Melaksanakan kesan paparan secara beransur -ansur memendekkan teks dalam reka bentuk web, bagaimana untuk mencapai kesan paparan teks khas untuk menjadikan panjang teks secara beransur -ansur memendekkan? Kesan ini ...
Bagaimanakah Saya Boleh Mensimulasikan Jejari Sempadan Inset Menggunakan Kecerunan CSS3?
05 Dec 2024
Mensimulasikan Jejari Sempadan Sisip dengan Kecerunan CSS3 Mencapai kesan jejari sempadan sisipan semata-mata dengan CSS3 menimbulkan cabaran. Walau bagaimanapun, menggunakan CSS3...
Bagaimanakah Saya Boleh Mencipta Kesan Marquee Responsif dengan Animasi CSS3?
04 Dec 2024
Melaksanakan Kesan Marquee ResponsifDalam artikel ini, kami mendalami bidang mencipta kesan marquee responsif menggunakan animasi CSS3....
Alat panas
Teks CSS digabungkan menjadi kesan khas animasi berbentuk hati
Teks CSS digabungkan menjadi kesan khas animasi berbentuk hati
Kesan khas animasi bunga ekspresi SVG CSS3
Kesan khas animasi bunga pengakuan SS3 SVG ialah kesan khas animasi Hari Valentine.
Laman web pusat beli-belah CSS biasanya menggunakan kod menu lungsur turun kategori kiri
Laman web pusat beli-belah CSS biasanya menggunakan kod menu lungsur turun kategori kiri
jQuery+CSS3 Kesan cinta Hari Valentine
jQuery+CSS3 Kesan khas cinta Hari Valentine ialah kesan khas animasi jantung berayun gantung Hari Valentine.
css3 sudu mencedok pulut bebola animasi kesan khas
Semangkuk ekspresi bebola pulut comel, sudu mencedok bebola pulut kesan khas animasi