在制作网站时避免图片太平淡经常会用到动画效果：由小到大跳跃出现。这种效果很有视觉冲击力，显著提高关注度~原理：利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧，并将动...
分类：
Web程序 时间：
2015-06-12 19:12:17
阅读次数：
238
CSS3(animation,trasfrom)总结1.Animation样式写法:格式:@-浏览器内核-keyframes样式名{}标准写法(chromesafari不支持@keyframes[样式名]{0%{left:10px;top:20px;}50%{left:20px;top:30px;}...
分类：
Web程序 时间：
2015-05-29 09:42:37
阅读次数：
186
自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，写动画也变的越来多越来越容易。可是当我们遇到需要利用数学公式的复杂动画时，却一筹莫展，只能怪小时候数学没学好（可能是语文老师教的）。那么问题来了，但我拿到要实现这样的需求，该如何：可能我们会去...
分类：
Web程序 时间：
2015-05-25 20:04:45
阅读次数：
231
@keyframes anim{
0{transform:translate(0,100px);}
100%{transform:translate(0,-50%);}
}
就是因为少在动画的起始位置0后面写100%在安卓手机不能生效在苹果手机生效》》》查了很久才发现的》》》
应该写成：
@keyframes anim{
0%{transform:translate(0,100p...
分类：
移动开发 时间：
2015-05-23 20:11:44
阅读次数：
318
CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习@keyframes规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某...
分类：
Web程序 时间：
2015-05-22 11:24:40
阅读次数：
116
css3的动画需要遵循@keyframes规制 动画效果div{ width: 100px; height: 100px; background: red;/* 相对布局*/ position: relative; animation: anim 5...
分类：
Web程序 时间：
2015-05-14 23:23:34
阅读次数：
223
@keyframes fadein { 0%{ opacity:0; background-color:red; } 40% { background-color:darkblue; } 70% { background-color:gold; } 100% { opacity:1; backg.....
分类：
Web程序 时间：
2015-05-04 19:59:58
阅读次数：
149
1、table内input，把它的边框和focus边框都变成透明，在ff可行，但是chrome会有样式，怎么解决？ 解决方法：border:none;outline:0;2、如下代码，css3动画在iPhone中无法运行，为什么？keyframes tad{0%{transform:scale(1)...
分类：
移动开发 时间：
2015-04-26 21:02:02
阅读次数：
143
@-webkit-keyframes twinkling{/*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } }Jquery ： $(element).css({"-webkit-animation"...
分类：
Web程序 时间：
2015-04-23 12:54:18
阅读次数：
676
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成，所有的动画效果和延时都是使用CSS属性，没有任何的javascript timeout()代码。
所有的4个页面切换效果都使用相同的js文件（用于点击事件和页面关闭事件）和CSS文件。每个demo的class名称略有区别。所有的demo都在 Chrome、Safari、Fire...
分类：
Web程序 时间：
2015-04-16 14:23:54
阅读次数：
192
