国产婷婷成人久久av免费高清,欧美成人看片黄a免费看

首頁

web前端

css教學(xué)

css3實(shí)現(xiàn)湯匙撈起湯圓的動(dòng)畫特效（超可愛）！

藏色散人

Feb 15, 2022 pm 01:39 PM

元宵節(jié) 湯圓

祝各位學(xué)員元宵節(jié)快樂！！！今天就送上一碗熱騰騰的湯圓，美味可口~完整的特效源碼及圖片連結(jié)在文末，點(diǎn)擊預(yù)覽下載即可使用！

GIF 2022-2-15 星期二上午 11-34-25.gif

本文特效是基於css3繪製的一碗可愛的湯圓表情，湯匙撈起一個(gè)湯圓動(dòng)畫特效。

HTML程式碼：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>湯勺撈起湯圓動(dòng)畫</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>

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);
  }
}

#執(zhí)行效果：

GIF 2022-2-15 星期二上午 11-34-25.gif

大家可以直接點(diǎn)擊特效連結(jié)預(yù)覽下載：http://ipnx.cn/xiazai/js/6642

更多可愛又酷的程式碼特效，可存取PHP中文網(wǎng)的js特效欄位！

以上是css3實(shí)現(xiàn)湯匙撈起湯圓的動(dòng)畫特效（超可愛）！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片

熱工具

熱門話題

Laravel 教程

1597

PHP教程

1488

NYT迷你填字遊戲答案

268

587

NYT連接提示和答案

130

836

Related knowledge

蛋仔派對(duì)圓圓子重返蛋仔島：元宵佳節(jié)上島團(tuán)圓 Feb 23, 2024 pm 06:16 PM

元宵佳節(jié)當(dāng)然要上島團(tuán)圓啦，蛋仔派對(duì)特意為大家準(zhǔn)備了多個(gè)元宵節(jié)活動(dòng)，包括妙妙新店籌備、團(tuán)圓福利節(jié)、歡鬧元宵、元宵節(jié)盲盒小鋪限時(shí)折扣返場、美食加工廠蛋宅大院上線等，一起來看看本次的活動(dòng)詳情。蛋仔派對(duì)圓圓子重返蛋仔島：元宵佳節(jié)上島團(tuán)圓妙妙新店籌備活動(dòng)時(shí)間:2月22日12:00-2月29日23:59活動(dòng)範(fàn)圍:全服玩家活動(dòng)內(nèi)容:打菜俠妙妙正在蛋仔島上籌備新店鋪，幫助妙妙完成籌備任務(wù)，即可在3月1日店舖開業(yè)後獲得稀有配件。 3月1日，蛋仔們也可透過活動(dòng)免費(fèi)取得外觀，

團(tuán)團(tuán)圓圓過佳節(jié)，《明日後》元宵節(jié)系列活動(dòng)重磅開啟 Feb 23, 2024 pm 08:37 PM

親愛的倖存者們，為了慶祝元宵節(jié)，聯(lián)盟推出了一系列精彩活動(dòng)。加入料理比賽，透過烹飪答案解鎖更多美味食譜，獲取執(zhí)勤點(diǎn)和獎(jiǎng)勵(lì)，還有調(diào)查小隊(duì)、雙人集訓(xùn)等你來挑戰(zhàn)，快來邀請(qǐng)好友共度這個(gè)歡樂的元宵節(jié)吧!【料理大賽】愛烹飪的倖存者有福了，2月22日至3月6日，元宵食譜加入料理大賽。每日9：00至23：50，前往營地噴泉或101入口處，與莫妮卡對(duì)話參與烹飪答題，解鎖神秘食譜，還有更多好禮等你來拿!【元宵連連看】在節(jié)日連線活動(dòng)中，元宵連看今日開啟，即日起至3月7日8點(diǎn)，活動(dòng)期間連線可獲得配方殘頁、重建分子、稀有

最強(qiáng)祖師全新坐騎免費(fèi)送：元宵節(jié)四重福利來啦！ Feb 23, 2024 pm 07:00 PM

馬上就又要迎來一個(gè)充滿傳統(tǒng)歡樂氣氛的節(jié)日元宵節(jié)，最強(qiáng)祖師為你帶來元宵節(jié)的四重福利，福利一免費(fèi)送限定坐騎、福利二元宵簽到活動(dòng)、福利三元宵節(jié)密令大放送、福利四公眾號(hào)活動(dòng)等，一起來看看本次的福利介紹。最強(qiáng)祖師全新坐騎免費(fèi)送：元宵節(jié)四重福利來啦！福利一：簽到福利升級(jí)，限定坐騎免費(fèi)送~坐騎-福燈團(tuán)圓：一位上古大能修士為慶賀佳節(jié)特別煉製的坐騎法器，寓意福氣美滿，團(tuán)團(tuán)圓圓，十分吉祥這麼可愛的坐騎，屆時(shí)可在元宵節(jié)簽到活動(dòng)中免費(fèi)索??！免費(fèi)坐騎雖然會(huì)遲到，但一定不會(huì)缺席。祖師們可得早早做好準(zhǔn)備，不要錯(cuò)過哦~PS：節(jié)

螞蟻莊園2月24日:為了避免湯圓黏在鍋底應(yīng)該 Feb 23, 2024 pm 06:34 PM

為了避免湯圓黏在鍋底應(yīng)該為螞蟻莊園2月24日的問題，螞蟻莊園今日答案是開水下湯圓，開水下湯圓這樣才不容易黏鍋，具體內(nèi)容跟隨小編一起來看著這篇螞蟻莊園今日答案2.24最新2024，希望能帶給你幫助。螞蟻莊園今日答案大全螞蟻莊園2月24日問題答案問題：為了避免湯圓粘到鍋底應(yīng)該答案：開水下湯圓解析：水開後下湯圓可以避免湯圓粘在鍋底，這種方法還可以讓湯圓的口感更加細(xì)膩。

王者榮耀元宵節(jié)返場肌膚一覽 Feb 24, 2024 am 08:31 AM

王者榮耀元宵節(jié)返場皮膚一覽，小伙伴們你元宵節(jié)馬上就要到了，王者榮耀也是在這個(gè)節(jié)日返場看一下好看的皮膚，要是遇到自己喜歡的可以及時(shí)的去購買了，下面就讓小編來告訴大家都有那些皮膚吧。王者榮耀元宵節(jié)返場皮膚一覽答案：瑤、墨子和露娜;具體分析瑤榮耀典藏很多人說這次的皮膚款式是白髮青衣，符合現(xiàn)在早春的氣息，要是大家有榮耀水晶的話就還是建議可以買的，應(yīng)該就會(huì)在這次的元宵節(jié)上線了。墨子黃金聖鬥士天蠍座皮膚這是一次連動(dòng)皮膚了，基本上會(huì)在四月份就上線了，而且是傳說皮膚了，大家要是喜歡玩這個(gè)角色的話還是需要準(zhǔn)備

戀與製作人2024元宵節(jié)福利情報(bào)：花好月圓，事事美滿 Feb 24, 2024 am 08:00 AM

馬上元宵節(jié)就要來了，戀與製作人也更新了元宵節(jié)福利，福利總共有三個(gè)，包括心意之禮、特別短信、去見他問候，玩家可以接受到來自他的元宵節(jié)主題特別短信，還可以收到他的元宵問候，相信大家已經(jīng)非常期待了。戀與製作人2024元宵節(jié)福利情報(bào)：花好月圓，事事美滿心意之禮2月24日18:00~2月25日23:59，可在遊戲內(nèi)郵箱查收五位角色分別贈(zèng)送的【鑽石*100 】，共【鑽石*500】的元宵節(jié)贈(zèng)禮。特別簡訊2月24日18:00~2月25日23:59，登入遊戲，即可在手機(jī)中收到五位角色的元宵節(jié)主題【特別簡訊】。

元夢(mèng)之星元宵來臨花燈燈萌翻全場：24號(hào)當(dāng)日免費(fèi)領(lǐng)取！ Feb 23, 2024 pm 05:37 PM

馬上就要迎來傳統(tǒng)節(jié)日元宵節(jié)啦，元夢(mèng)之星也是為大家準(zhǔn)備了禮物，24號(hào)元宵節(jié)當(dāng)天登錄遊戲就可以免費(fèi)領(lǐng)取花燈燈時(shí)裝，僅此一天，錯(cuò)過就沒有了，這麼可愛迷人的新時(shí)裝花燈燈長什麼樣，一起來看看。元夢(mèng)之星元宵來臨花燈燈萌翻全場：24號(hào)當(dāng)日免費(fèi)領(lǐng)?。≡?jié)驚喜元宵節(jié)看花燈燈元宵之夜，大街小巷張燈結(jié)彩,人們還會(huì)點(diǎn)起萬蓋花燈,歡度元宵佳節(jié)哦~當(dāng)然咯~元夢(mèng)也迎來了喜氣滿滿可愛迷人的新時(shí)裝花燈燈呢!染色方案動(dòng)作展示

元宵節(jié)ppt畫元宵海報(bào)教學(xué)圖解 Mar 20, 2024 am 09:59 AM

同學(xué)們好，我又來跟大家分享實(shí)用的PPT教學(xué)！有時(shí)候，我們?cè)谑褂肞PT的時(shí)候，需要在投影片中設(shè)計(jì)一張海報(bào)圖。那麼，如果我們想製作一張關(guān)於元宵節(jié)ppt畫元宵海報(bào)的話，我們?cè)撛觞N製作呢？今天，我將為大家詳細(xì)介紹。接下來，我會(huì)分享一些製作元宵節(jié)PPT海報(bào)的詳細(xì)步驟，希望大家會(huì)喜歡。歡迎有興趣的朋友一起加入，一起製作元宵節(jié)PPT畫元宵的海報(bào)吧！為了製作元宵節(jié)PPT上的元宵海報(bào)，我們需要遵循一些設(shè)計(jì)步驟。首先，我們需要畫燈籠，這是第一步；其次，是畫元宵。在製作過程中，我們要確保按照這個(gè)順序依序進(jìn)行，這樣

See all articles

css3實(shí)現(xiàn)湯匙撈起湯圓的動(dòng)畫特效（超可愛）！

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

css3實(shí)現(xiàn)湯匙撈起湯圓的動(dòng)畫特效（超可愛）！

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

css3實(shí)現(xiàn)湯匙撈起湯圓的動(dòng)畫特效（超可愛）！