怎么用css3绘制汤勺捞起汤圆的动画特效

魁首哥

作者

怎么用css3绘制汤勺捞起汤圆的动画特效

这篇文章主要介绍了怎么用css3绘制汤勺捞起汤圆的动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用css3绘制汤勺捞起汤圆的动画特效文章都会有所收获，下面我们一起来看看吧。

HTML代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>汤勺捞起汤圆动画</title><linkrel="stylesheet"href="css/style.css"></head><body><divclass="bowl"><divclass="back"></div><divclass="spoon"><divclass="scoop"></div></div><divclass="contents"><divclass="syrup"></div><divclass="riceballuno"><divclass="face"></div></div><divclass="riceballdos"><divclass="face"></div></div><divclass="riceballtres"><divclass="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")00/10em10em,#fff;background-blend-mode:hard-light;box-shadow:inset-25px-25px25pxrgba(229,219,211,0.8),5px5px15px5pxrgba(216,200,190,0.3);-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-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:3srice-upinfinite;animation:3srice-upinfinite;}.riceball.uno.face{-webkit-transform:translate(-50%,-50%)rotate(-20deg);transform:translate(-50%,-50%)rotate(-20deg);-webkit-animation:3sface-bobinfinite;animation:3sface-bobinfinite;}.riceball.uno.face::before,.riceball.uno.face::after{-webkit-animation:3seye-bulgeinfinite;animation:3seye-bulgeinfinite;}.riceball.dos{left:20px;bottom:-35px;-webkit-animation:1slittle-bob1linearinfinite;animation:1slittle-bob1linearinfinite;}.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.2slittle-bob2linearinfinite;animation:1.2slittle-bob2linearinfinite;}.syrup{position:absolute;bottom:-50px;width:500px;height:200px;border-radius:50%;background:url("../img/1.jpg")00/10em10em,radial-gradient(ellipseatbottomcenter,#f0ad420%,#feda9031%,#f0ad4266%,#feda9086%,#f0ad42100%);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")00/15em15em,radial-gradient(ellipseattopleft,#fff0%,#fcfcfc35%,#f1ccbb60%,#fdf1dd70%,#fff80%);background-blend-mode:hard-light;border-bottom-left-radius:230px;border-bottom-right-radius:230px;box-shadow:15px40px80px-30px#C5AE9F;}.back{position:absolute;top:-100px;width:500px;height:200px;border-radius:50%;background:url("../img/1.jpg")00/10em10em,radial-gradient(ellipseatbottomright,#fff0%,#fcfcfc35%,#f1ccbb60%,#fdf1dd75%,#fff90%);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")00/5em10em,linear-gradient(tobottom,#fff40%,#e2d7cb100%);background-blend-mode:hard-light;border-top-left-radius:20px;border-bottom-left-radius:20px;-webkit-animation:spoon-up3sinfinite;animation:spoon-up3sinfinite;}.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")00/10em10em,#fff;background-blend-mode:hard-light;box-shadow:inset-10px-5px15px#ceb499,10px10px50px-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")00/10em10em,linear-gradient(tobottom,#e2d7cb20%,#fff100%);background-blend-mode:hard-light;border-radius:50%;}@-webkit-keyframesspoon-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);}}@keyframesspoon-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-keyframesrice-up{0%{left:150px;bottom:65px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}25%{bottom:160px;-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}50%{left:20px;bottom:140px;-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}55%{-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}100%{left:150px;bottom:65px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}@keyframesrice-up{0%{left:150px;bottom:65px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}25%{bottom:160px;-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}50%{left:20px;bottom:140px;-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}55%{-webkit-clip-path:inset(-40px-30px0-20px);clip-path:inset(-40px-30px0-20px);}100%{left:150px;bottom:65px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}@-webkit-keyframesface-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);}}@keyframesface-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-keyframeseye-bulge{0%{width:12px;height:12px;}50%{width:18px;height:18px;}100%{width:12px;height:12px;}}@keyframeseye-bulge{0%{width:12px;height:12px;}50%{width:18px;height:18px;}100%{width:12px;height:12px;}}@-webkit-keyframeslittle-bob1{0%{bottom:-35px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}50%{bottom:-33px;-webkit-clip-path:inset(-40px-30px23%-20px);clip-path:inset(-40px-30px23%-20px);}100%{bottom:-35px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}@keyframeslittle-bob1{0%{bottom:-35px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}50%{bottom:-33px;-webkit-clip-path:inset(-40px-30px23%-20px);clip-path:inset(-40px-30px23%-20px);}100%{bottom:-35px;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}@-webkit-keyframeslittle-bob2{0%{bottom:0;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}50%{bottom:-2px;-webkit-clip-path:inset(-40px-30px26%-20px);clip-path:inset(-40px-30px26%-20px);}100%{bottom:0;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}@keyframeslittle-bob2{0%{bottom:0;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}50%{bottom:-2px;-webkit-clip-path:inset(-40px-30px26%-20px);clip-path:inset(-40px-30px26%-20px);}100%{bottom:0;-webkit-clip-path:inset(-40px-30px25%-20px);clip-path:inset(-40px-30px25%-20px);}}

运行效果：