自定义动画 由于有一部分低版本的浏览器并不支持的问题，所以这个样式要多做兼容，各大浏览器兼容前缀如下： 前缀 1. animation-name(动画名称)：语法：animation-name ：none | <identifier> 说明：元素所应用的动画 名称，必须与规则@keyframes配合 ...
分类：
Web程序 时间：
2016-08-15 22:11:20
阅读次数：
223
animation-name规定动画的名称。 keyframes定义动画，一般不用from和to，直接用百分比来定义过程。 animation-duration规定动画的时长。 animation-timing-function规定动画的速度曲线，常用的有ease、ease-in、ease-in-o ...
分类：
Web程序 时间：
2016-08-15 20:48:26
阅读次数：
148
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css3八卦</title> <style> body{background-color: lightgray;} @-webkit-keyframes yid ...
分类：
其他好文 时间：
2016-08-14 16:06:03
阅读次数：
105
css3动画 @keyframes 规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性 以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100% 语法：@keyframes animationname {keyframes-selector {c ...
分类：
Web程序 时间：
2016-08-09 22:11:15
阅读次数：
234
关键帧动画： 关键帧：动画执行过程中，物体在某一位置上的特殊状态 关键帧动画：使用连续的关键帧，控制物体连续的状态变化 何时使用关键帧动画： 连续，有规律的过渡——过渡transition 无规律的连续变化——动画animation 如何实现：2步： 1. 定义关键帧： @keyframes 动画名 ...
分类：
Web程序 时间：
2016-08-08 17:36:04
阅读次数：
243
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> @keyframes bagua{ 25%{transform:translate(500px) rotate(360deg);} ...
分类：
移动开发 时间：
2016-08-07 23:20:35
阅读次数：
198
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> //动画旋转 @keyframes bagua{ 100%{transform:rotate(1080deg)} } //适配浏览 ...
分类：
其他好文 时间：
2016-08-07 23:04:32
阅读次数：
177
应用css3中的transition（过渡动画）、@keyframes（关键帧动画）、transform（2D、3D转换）可以实现一些小的动画效果。 一、transition—过渡动画 <!DOCTYPE html> <html><head> <title>基本图像的放大缩小</title> <me ...
分类：
Web程序 时间：
2016-08-06 16:04:38
阅读次数：
252
一、介绍 keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面跟着是动画名称加上一对花括号“{…}”，括号中是一些不同时间段样式规则。 语法：@keyframes animationname {keyframes-selector{cs ...
分类：
Web程序 时间：
2016-08-03 15:19:58
阅读次数：
360
示例： @keyframes tu{ 30%{ border-radius: 50%; } 70%{transform:translate(400px) rotate(360deg);} 90%{color: blueviolet} } //适应浏览器 @-webkit-keyframes tu { ...
分类：
Web程序 时间：
2016-07-31 19:24:33
阅读次数：
290
