![\"GIF](\"https:\/\/img.php.cn\/upload\/image\/642\/168\/431\/1644896083478443.gif\" "\\"1644896083478443.gif\\"")
<\/p>\n
hujung hadapan web
tutorial css
CSS3 menyedari kesan animasi mencedok bebola pulut dengan sudu (sangat comel)!
CSS3 menyedari kesan animasi mencedok bebola pulut dengan sudu (sangat comel)!
Feb 15, 2022 pm 01:39 PM
Selamat Pesta Tanglung kepada semua pelajar! ! ! Hari ini saya memberi anda semangkuk bebola pulut panas, yang lazat Kod sumber kesan khas dan pautan gambar ada di hujung artikel Klik untuk pratonton dan muat turun untuk digunakan.
Kesan khas artikel ini adalah berdasarkan ungkapan semangkuk bebola pulut comel yang dilukis dengan css3, dan kesan khas animasi mencedok bebola pulut dengan sudu.
Kod HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>湯勺撈起湯圓動(dòng)畫(huà)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bowl">
<div class="back"></div>
<div class="spoon">
<div class="scoop"></div>
</div>
<div class="contents">
<div class="syrup"></div>
<div class="riceball uno">
<div class="face"></div>
</div>
<div class="riceball dos">
<div class="face"></div>
</div>
<div class="riceball tres">
<div class="face"></div>
</div>
</div>
</div>
</body>
</html>kod style.css:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background: #f7e5d7;
}
.riceball {
position: absolute;
width: 200px;
height: 200px;
background: #fff;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, #fff;
background-blend-mode: hard-light;
box-shadow: inset -25px -25px 25px rgba(229, 219, 211, 0.8), 5px 5px 15px 5px rgba(216, 200, 190, 0.3);
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
.riceball .face {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(5deg);
transform: translate(-50%, -50%) rotate(5deg);
width: 30px;
height: 20px;
background: #000;
border-radius: 50%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.riceball .face::before, .riceball .face::after {
display: block;
content: "";
position: absolute;
top: -5px;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
}
.riceball .face::before {
left: -40px;
}
.riceball .face::after {
right: -40px;
}
.riceball.uno {
left: 150px;
bottom: 65px;
-webkit-animation: 3s rice-up infinite;
animation: 3s rice-up infinite;
}
.riceball.uno .face {
-webkit-transform: translate(-50%, -50%) rotate(-20deg);
transform: translate(-50%, -50%) rotate(-20deg);
-webkit-animation: 3s face-bob infinite;
animation: 3s face-bob infinite;
}
.riceball.uno .face::before, .riceball.uno .face::after {
-webkit-animation: 3s eye-bulge infinite;
animation: 3s eye-bulge infinite;
}
.riceball.dos {
left: 20px;
bottom: -35px;
-webkit-animation: 1s little-bob1 linear infinite;
animation: 1s little-bob1 linear infinite;
}
.riceball.dos .face {
-webkit-transform: translate(-50%, -50%) rotate(-5deg);
transform: translate(-50%, -50%) rotate(-5deg);
}
.riceball.tres {
bottom: 0;
right: 30px;
-webkit-animation: 1.2s little-bob2 linear infinite;
animation: 1.2s little-bob2 linear infinite;
}
.syrup {
position: absolute;
bottom: -50px;
width: 500px;
height: 200px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, radial-gradient(ellipse at bottom center, #f0ad42 0%, #feda90 31%, #f0ad42 66%, #feda90 86%, #f0ad42 100%);
background-blend-mode: hard-light;
}
.bowl {
position: absolute;
top: calc(50% + 100px);
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
height: 250px;
background: url("../img/1.jpg") 0 0/15em 15em, radial-gradient(ellipse at top left, #fff 0%, #fcfcfc 35%, #f1ccbb 60%, #fdf1dd 70%, #fff 80%);
background-blend-mode: hard-light;
border-bottom-left-radius: 230px;
border-bottom-right-radius: 230px;
box-shadow: 15px 40px 80px -30px #C5AE9F;
}
.back {
position: absolute;
top: -100px;
width: 500px;
height: 200px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, radial-gradient(ellipse at bottom right, #fff 0%, #fcfcfc 35%, #f1ccbb 60%, #fdf1dd 75%, #fff 90%);
background-blend-mode: hard-light;
}
.contents {
position: fixed;
bottom: 150px;
width: 500px;
height: 400px;
border-bottom-left-radius: 50% 100px;
border-bottom-right-radius: 50% 100px;
border-top-left-radius: 0;
border-top-right-radius: 0;
overflow: hidden;
}
.spoon {
position: absolute;
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
width: 300px;
height: 40px;
background: url("../img/1.jpg") 0 0/5em 10em, linear-gradient(to bottom, #fff 40%, #e2d7cb 100%);
background-blend-mode: hard-light;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-animation: spoon-up 3s infinite;
animation: spoon-up 3s infinite;
}
.spoon .scoop {
position: absolute;
top: 50%;
right: -200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 220px;
height: 140px;
border-radius: 50%;
background: url("../img/1.jpg") 0 0/10em 10em, #fff;
background-blend-mode: hard-light;
box-shadow: inset -10px -5px 15px #ceb499, 10px 10px 50px -10px #C5AE9F;
}
.spoon .scoop::before {
display: block;
content: "";
position: absolute;
top: 2px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 120px;
background: url("../img/1.jpg") 0 0/10em 10em, linear-gradient(to bottom, #e2d7cb 20%, #fff 100%);
background-blend-mode: hard-light;
border-radius: 50%;
}
@-webkit-keyframes spoon-up {
0% {
top: -60%;
left: -200px;
}
25% {
top: -80%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
top: -90%;
left: -300px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@keyframes spoon-up {
0% {
top: -60%;
left: -200px;
}
25% {
top: -80%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
top: -90%;
left: -300px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
top: -60%;
left: -200px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@-webkit-keyframes rice-up {
0% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
25% {
bottom: 160px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
50% {
left: 20px;
bottom: 140px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
55% {
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
100% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes rice-up {
0% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
25% {
bottom: 160px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
50% {
left: 20px;
bottom: 140px;
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
55% {
-webkit-clip-path: inset(-40px -30px 0 -20px);
clip-path: inset(-40px -30px 0 -20px);
}
100% {
left: 150px;
bottom: 65px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@-webkit-keyframes face-bob {
0% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
50% {
height: 10px;
-webkit-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
}
@keyframes face-bob {
0% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
50% {
height: 10px;
-webkit-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(10deg);
transform: translate(-50%, -50%) rotate(10deg);
}
}
@-webkit-keyframes eye-bulge {
0% {
width: 12px;
height: 12px;
}
50% {
width: 18px;
height: 18px;
}
100% {
width: 12px;
height: 12px;
}
}
@keyframes eye-bulge {
0% {
width: 12px;
height: 12px;
}
50% {
width: 18px;
height: 18px;
}
100% {
width: 12px;
height: 12px;
}
}
@-webkit-keyframes little-bob1 {
0% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -33px;
-webkit-clip-path: inset(-40px -30px 23% -20px);
clip-path: inset(-40px -30px 23% -20px);
}
100% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes little-bob1 {
0% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -33px;
-webkit-clip-path: inset(-40px -30px 23% -20px);
clip-path: inset(-40px -30px 23% -20px);
}
100% {
bottom: -35px;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@-webkit-keyframes little-bob2 {
0% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -2px;
-webkit-clip-path: inset(-40px -30px 26% -20px);
clip-path: inset(-40px -30px 26% -20px);
}
100% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}
@keyframes little-bob2 {
0% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
50% {
bottom: -2px;
-webkit-clip-path: inset(-40px -30px 26% -20px);
clip-path: inset(-40px -30px 26% -20px);
}
100% {
bottom: 0;
-webkit-clip-path: inset(-40px -30px 25% -20px);
clip-path: inset(-40px -30px 25% -20px);
}
}Kesan berjalan:
Anda boleh terus klik pada pautan kesan khas untuk pratonton dan muat turun: http://ipnx.cn/xiazai/ js/6642
Untuk kesan kod yang lebih comel dan keren, sila lawati lajur kesan khas js di tapak web PHP Cina!
Atas ialah kandungan terperinci CSS3 menyedari kesan animasi mencedok bebola pulut dengan sudu (sangat comel)!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
Parti Danzi Yuanyuanzi kembali ke Pulau Danzi: perjumpaan semula di pulau itu semasa Pesta Tanglung
Feb 23, 2024 pm 06:16 PM
Semestinya, semasa Pesta Tanglung, kami perlu pergi ke pulau untuk reunion Parti Danzi telah menyediakan khas beberapa aktiviti Pesta Tanglung untuk semua orang, termasuk Penyediaan Kedai Baru Miaomiao, Pesta Kebajikan Reunion, Pesta Tanglung Lucu, Kotak Buta Pesta Tanglung. Pulangan Diskaun Masa Terhad Beli, dan Kilang Pemprosesan Makanan Danzhai Compound ada dalam talian. Mari lihat butiran acara ini. Danzi Party Yuanyuanzi kembali ke Pulau Danzi: Reunion di pulau itu semasa Pesta Tanglung Miaomiao Kedai Baharu Masa Acara Persediaan: 22 Februari 12:00-29 Februari 23:59 Skop Acara: Semua pemain Kandungan Acara: Lelaki Sayur Miaomiao sedang bersedia untuk yang baharu kedai di Pulau Danzi Bantu Miaomiao menyelesaikan tugas persediaan dan anda boleh mendapatkan aksesori yang jarang berlaku selepas kedai dibuka pada 1 Mac. Pada 1 Mac, Eggboys juga boleh mendapatkan penampilan secara percuma melalui acara tersebut.
Reunion untuk meraikan perayaan itu, siri aktiviti Pesta Tanglung 'Selepas Esok' telah bermula
Feb 23, 2024 pm 08:37 PM
Kepada yang terselamat, untuk meraikan Pesta Tanglung, Perikatan telah melancarkan satu siri aktiviti menarik. Sertai pertandingan memasak, buka kunci resipi yang lebih lazat dengan menjawab soalan memasak, dan dapatkan mata tugas dan ganjaran Terdapat juga pasukan penyiasat dan latihan dua orang yang menunggu anda untuk mencabar Pertandingan] Mereka yang gemar memasak Berbahagialah mereka yang terselamat, dari 22 Februari hingga 6 Mac, resipi Pesta Tanglung akan ditambah ke pertandingan memasak. Dari jam 9:00 hingga 23:50 setiap hari, pergi ke air pancut kem atau pintu masuk 101, bercakap dengan Monica, mengambil bahagian dalam kuiz memasak, membuka kunci resipi misteri, dan lebih banyak hadiah menanti anda [Pesta Tanglung Lianliankan] Semasa perayaan , Dalam acara dalam talian, Pesta Tanglung Lianliankan bermula hari ini, dari sekarang hingga 8:00 pada 7 Mac. Semasa acara itu, anda boleh mendapatkan serpihan resipi, molekul yang dibina semula dan item yang jarang ditemui dengan menyambung dalam talian.
Tunggangan baharu nenek moyang terkuat diberikan secara percuma: Empat faedah untuk Pesta Tanglung akan datang!
Feb 23, 2024 pm 07:00 PM
Pesta Tanglung, sebuah perayaan yang penuh dengan suasana tradisional dan menggembirakan, akan datang Nenek moyang terkuat membawakan kepada anda empat faedah Pesta Tanglung, termasuk pemasangan terhad percuma untuk faedah pertama, aktiviti log masuk untuk faedah kedua dan tiga Tanglung. Perintah rahsia festival, kebajikan empat aktiviti akaun awam, dsb., mari kita lihat pengenalan kebajikan ini. Tunggangan baharu nenek moyang terkuat diberikan secara percuma: Empat faedah untuk Pesta Tanglung akan datang! Faedah 1: Faedah log masuk ditingkatkan, pemasangan terhad diberikan secara percuma~Mount-Fu Leng Reunion: Senjata ajaib pelekap yang ditapis khas oleh sami kuat purba untuk meraikan perayaan, yang bermaksud kebahagiaan, pertemuan semula dan sangat bertuah. Gunung yang begitu comel, Anda boleh mendapatkannya secara percuma semasa acara daftar masuk Pesta Tanglung! Walaupun pemasangan percuma akan terlambat, ia pasti tidak akan hadir. Patriark, sila bersedia awal, jangan ketinggalan ~ PS: Festival
Ant Manor 24 Februari: Untuk mengelakkan bebola pulut melekat pada dasar periuk, anda harus
Feb 23, 2024 pm 06:34 PM
Untuk mengelakkan bebola pulut melekat di dasar periuk, ini sepatutnya menjadi soalan Ant Manor pada 24 Februari Jawapan untuk Ant Manor hari ini ialah merebus bebola pulut di bawah air air akan menghalang mereka daripada melekat pada periuk Ikuti editor untuk membaca artikel ini tentang Ant Manor untuk jawapan hari ini ialah 2.24, yang terbaru pada tahun 2024, saya harap ia dapat membantu anda. Ant Manor Jawapan Hari Ini Ant Manor 24 Februari Soalan dan Jawapan Soalan: Untuk mengelakkan bebola pulut melekat di dasar periuk, jawapannya ialah: merebus bebola pulut di bawah air mendidih Analisis: menambah pulut bebola selepas air masak dapat mengelakkan bebola pulut melekat di dasar periuk Cara ini juga boleh membuatkan bebola pulut melekat di bahagian bawah periuk.
Senarai kulit pengembalian Festival Tanglung Honor of Kings
Feb 24, 2024 am 08:31 AM
Senarai kulit untuk kembalinya Raja Kemuliaan ke Pesta Tanglung, Festival Tanglung akan datang tidak lama lagi ke festival itu untuk melihat beberapa kulit yang tampan boleh membelinya tepat pada masanya Berikut adalah Biar saya beritahu anda jenis kulit yang anda miliki. Senarai jawapan kepada King of Glory Lantern Festival mengembalikan kulit: Yao, Mozi dan Luna analisis terperinci Yao Glory Collection Ramai orang mengatakan bahawa gaya kulit kali ini adalah rambut putih dan Tsing Yi, yang sesuai dengan suasana awal. Jika semua orang mempunyai Kristal Kemuliaan, ia masih akan saya cadangkan anda membelinya semasa Pesta Tanglung ini. Kulit Mozi's Golden Saint Scorpio ialah kulit kolaborasi Ia pada asasnya akan dilancarkan pada bulan April, dan ia adalah kulit legenda Jika anda suka memainkan watak ini, anda masih perlu bersedia.
Maklumat kebajikan Pesta Tanglung Cinta dan Pengeluar 2024: Bunga sedang mekar dan bulan purnama, semuanya gembira
Feb 24, 2024 am 08:00 AM
Festival Tanglung akan datang tidak lama lagi, dan penerbit Love and Love juga telah mengemas kini faedah Festival Tanglung Secara keseluruhannya terdapat tiga faedah, termasuk hadiah ikhlas, mesej teks istimewa, dan ucapan selamat datang daripada beliau mesej teks daripadanya Anda juga boleh menerima ucapan Festival Tanglungnya, yang saya percaya semua orang menantikannya. Maklumat kebajikan Pesta Tanglung Love and Producer 2024: Bunga sedang mekar dan bulan penuh, dan semuanya gembira Dari jam 18:00 pada 24 Februari hingga 23:59 pada 25 Februari, anda boleh menyemak peti mel dalam permainan untuk menerima [. Berlian*100] masing-masing dipersembahkan oleh lima aksara ], sejumlah [Berlian*500] hadiah Pesta Tanglung. SMS Istimewa Dari jam 18:00 pada 24 Februari hingga 23:59 pada 25 Februari, log masuk ke permainan dan terima [Special SMS] bertemakan Pesta Tanglung daripada lima aksara pada telefon anda.
Tanglung Pesta Tanglung Pesta Tanglung Yuanmeng Star sangat comel dan comel: dapatkannya secara percuma pada 24hb!
Feb 23, 2024 pm 05:37 PM
Pesta Tanglung tradisional akan datang tidak lama lagi, dan Yuanmeng Star juga telah menyediakan hadiah untuk semua orang Jika anda log masuk ke permainan di Pesta Tanglung pada 24hb, anda boleh menerima pakaian tanglung secara percuma pada hari ini sahaja. t miss it. Ia sangat comel dan menawan. Mari lihat rupa tanglung fesyen baharu. Tanglung Pesta Tanglung Pesta Tanglung Yuanmeng Star sangat comel dan comel: dapatkannya secara percuma pada 24hb! Kejutan semasa Pesta Tanglung Menonton tanglung semasa Pesta Tanglung Pada malam Pesta Tanglung, jalan-jalan dan lorong-lorong dihiasi dengan tanglung dan lampu-lampu yang berwarna-warni Orang ramai juga akan menyalakan ribuan tanglung untuk meraikan Pesta Tanglung~ Yuanmeng juga memperkenalkan fesyen baharu yang gembira, comel dan menawan
Perayaan Tanglung ppt melukis ilustrasi tutorial poster Pesta Tanglung
Mar 20, 2024 am 09:59 AM
Hello pelajar, saya di sini untuk berkongsi dengan anda tutorial PPT praktikal sekali lagi! Kadang-kadang, apabila kita menggunakan PPT, kita perlu mereka bentuk imej poster dalam slaid. Jadi, jika kita ingin membuat poster lukisan ppt Pesta Tanglung tentang Pesta Tanglung, bagaimana kita harus membuatnya? Hari ini, saya akan memperkenalkannya kepada anda secara terperinci. Seterusnya, saya akan kongsikan beberapa langkah terperinci untuk membuat poster PPT Pesta Tanglung Saya harap anda akan menyukainya. Rakan-rakan yang berminat dialu-alukan untuk menyertai dan membuat poster PPT yang menggambarkan Pesta Tanglung untuk Pesta Tanglung! Untuk membuat poster Pesta Tanglung di PPT Pesta Tanglung, kita perlu mengikuti beberapa langkah reka bentuk. Pertama, kita perlu melukis tanglung, yang merupakan langkah pertama, kita perlu melukis Pesta Tanglung. Semasa proses pengeluaran, kita mesti memastikan bahawa kita meneruskan pesanan ini, supaya
