web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
有趣的纯CSS3弹性卡通小怪物弹跳动画特效
分类:
动画效果
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
##### HTML结构 每一个卡通小怪物的HTML结构都基本相似,使用嵌套
来构成怪物的身体。例如蓝色怪物的HTML结构为: ```html
``` ##### CSS样式 所有的小怪物都会执行一个bounce帧动画,该动画用于制作小怪物身体的弹性动画效果。 ```html .item { width: 200px; height: 200px; bottom: 70px; left: 50%; margin-left: -50px; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .item .chewing { width: 100px; height: 100px; bottom: 0; left: 50%; margin-left: -50px; box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1); border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; -webkit-animation: bounce 0.6s ease-in-out infinite; animation: bounce 0.6s ease-in-out infinite; } @keyframes bounce { 0% { bottom: 0; } 65% { bottom: 8px; } 100% { bottom: 0; border-radius: 49% 47% 42% 40%/60% 60% 40% 40%; } } ``` arm-bounce帧动画用于怪物手臂的缩放动画效果。mounth帧动画是怪物的嘴巴动画效果。还有一个shadow帧动画的怪物的阴影动画效果。 ```html @keyframes arm-bounce { 0%, 100% { bottom: 28px; } 33% { bottom: 23px; } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 66% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes mounth { 0%, 100% { height: 4px; border-radius: 50% 50% 100% 100%; } 50% { height: 8px; bottom: 17px; border-radius: 30% 30% 100% 100%; } } @keyframes shadow { 0%, 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scaleX(0.9); transform: scaleX(0.9); } } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告