H5 按钮抖动效果
来源:互联网 发布:win7照相机软件 编辑:程序博客网 时间:2024/05/16 16:11
/*自定义一个透明度从0到1的动画,它的名称是fade-in*/@keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-webkit-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-ms-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-o-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-moz-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}.first-words{ opacity: 0; /*实先规定文字的状态是不显示的*/ animation: fade-in 4s ease 0s 1; /*调用名称为fade-in的动画,全程动画显示时间4S,进入方式为ease,延时0S进入,播放次数1次*/ -webkit-animation: fade-in 4s ease 0s 1; -moz-animation: fade-in 4s ease 0s 1; -o-animation: fade-in 4s ease 0s 1; -ms-animation: fade-in 4s ease 0s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.second-words{ opacity: 0; animation: fade-in 4s ease 2s 1; -webkit-animation: fade-in 4s ease 2s 1; -moz-animation: fade-in 4s ease 2s 1; -o-animation: fade-in 4s ease 2s 1; -ms-animation: fade-in 4s ease 2s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.third-words{ opacity: 0; animation: fade-in 4s ease 4s 1; -webkit-animation: fade-in 4s ease 4s 1; -moz-animation: fade-in 4s ease 4s 1; -o-animation: fade-in 4s ease 4s 1; -ms-animation: fade-in 4s ease 4s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }/** icon抖动*/@-webkit-keyframes buzz-out { 0% { -webkit-transform: translateY(0.03rem) rotate(2deg); } 20% { -webkit-transform: translateY(0.05rem) rotate(2deg); } 40% { -webkit-transform: translateY(0.05rem) rotate(2deg); } 60% { -webkit-transform: translateY(0.05rem) rotate(2deg); } 80% { -webkit-transform: translateY(0.05rem) rotate(2deg); } 100% { -webkit-transform: translateY(0.05remx) rotate(-2deg); }}#next{ /* 获得抖动对象 */ -webkit-animation-name: buzz-out; -webkit-animation-duration: 0.75s; /* 抖动速度 */ -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 100; /* 抖动次数 */}
阅读全文
0 0
- H5 按钮抖动效果
- H5实战(五):幽灵按钮效果
- 抖动效果
- 抖动效果
- 抖动效果
- 抖动效果
- WPF制作抖动按钮
- H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现
- 窗口抖动效果
- Button的抖动效果
- ios 抖动动画效果
- ios抖动动画效果
- android实现抖动效果
- QQ抖动效果
- Cocos2d-x 抖动效果
- 抖动动画效果
- DIV飞入 抖动效果
- 窗口抖动效果
- 对Unity协程的理解
- 2017/7/21 工作总结
- 深机笔记
- 安装jupyter的过程中出现Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-qMLlkr/
- 深入理解Java内部类
- H5 按钮抖动效果
- 第一天纪念
- 设置模式(3)——策略模式
- Java实现折半插入排序
- SVN 安装部署并设置为自动同步到实际的项目
- 数据结构跑路篇——冒泡排序
- UDP简单例子
- VGG Face测试的Python版本
- 动态顺序表