css3动画实现吃豆豆效果

实现效果：

HTML

   <div class="box"><span></span></div>

CSS

// 外侧边框
.box {display: flex;align-items: center;margin: 100px auto;width: 500px;height: 120px;border: 1px solid #ccc;// 豆豆span {display: flex;position: relative;width: 100px;height: 100px;border-radius: 50%;background-color: orange;animation: 4s go linear infinite;// 大嘴&::before {content: '';border: 50px solid transparent;border-right-color: #fff;animation: 1s eat linear infinite;}// 眼睛&::after {position: absolute;content: '';width: 20px;height: 20px;left: 30px;top: 20px;border-radius: 50%;background-color: #fff;}// 豆豆的运动@keyframes go {0% {transform: translateX(0);}50% {transform: translateX(400px) rotate(0);}51% {transform: translateX(400px) rotateY(180deg) ;}100% {transform: translateX(0) rotateY(180deg);}}// 豆豆吃东西@keyframes eat {0% {transform: rotateX(90deg);}100% {transform: rotateX(800deg);}}}
}

css3动画实现吃豆豆效果相关推荐

CSS3动画实现高亮光弧效果，循环闪动效果
主要运用css动画进行循环播放,修改css渐变效果元素 <!Doctype html> <html><head><meta name="viewpo ...
html 鼠标图标做成动画效果,很好看的css3动画按钮鼠标悬停效果【2个实例】
前一篇文章我介绍了5个悬停效果非常漂亮的css3动画按钮实例,本文将再通过2个实例介绍悬停效果很酷的css3实现的动画按钮. 实例一实例一:css3实现的动画按钮我们做一个有星星的圆形按钮!当然, ...
css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
CSS3动画常用贝塞尔曲线-效果演示
CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. demo演示列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{animation: stretch 1s cub ...
工具人（超级赛亚人）学长写给超级可爱学妹的web简单课设（css3 动画 + 简单樱花飘落效果）
就是老工具人了. 学校web初级课程设计. 大概构思加完成1.5小时. 就这样. 大家想看拿走. 附上git地址:git地址,打包带走部分页面效果展示: 只是一个简单web课程,后续会上传雪花飘落 ...
css3动画（animation）效果1-漂浮的白云
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css3动画实现摩天轮效果
原谅我不会搞动图看不到效果 <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
html css动画自动旋转,HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）...
代码如下: HTML5-页面切换动画 #viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; ...
css3制作吃豆豆动画
制作思路: 利用两个盒子反向旋转来制作嘴巴动画,然后为大盒子设置圆角属性使其超出隐藏,制作出头的效果,之后用边框阴影制作多个小球,然后依次进入嘴巴. 需要用到的知识点: transform-origi ...

css3动画实现吃豆豆效果

css3动画实现吃豆豆效果

HTML

CSS

css3动画实现吃豆豆效果相关推荐

最新文章

热门文章