css动效,css动效按钮

使用css animation实现小人跑动效果

前了阵子学习了一些animation的动效使用方法，一方面是想练习，一方面也是好奇那些动画怎么制作出来的，于是乎，我就动手实现一个小人动画跑动的特效。

CSS3动画和js动画各有什么优劣

CSS3的动画的优点：

1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）

2.代码相对简单

但其缺点也很明显：

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。

css怎么让一个display none 的界面出现有动画

看你需要什么样的动画吧，css本身一些也能满足一些动画效果的要求。

例如

.ss {

width:200px;

height:200x;

display:none;

transtion: transform 2s;

transform:scale(0)

}

.ss-active{

display:block;

transform:scale(1)

}

当标签被赋上ss-active的类名是，是一个两秒逐渐放大的效果。示例仅供参考，transform还有其他效果平移，旋转，扭曲之类的。

(手机盲写的，感觉没问题，如有错误欢迎指正。)

CSS问题：怎样让鼠标经过按钮时发生的状态一直停留在当页呢？

$("p").mouseenter(function(){

$("p").css("background-color","yellow");

});

只写mouseenter的动效的话，鼠标经过之后，状态会一直保留，如果想要鼠标离开之后出现新的状态，就在后面再加一个mouseleave事件，

如果简单一点的，hover就可以直接完成，但是hover是包含鼠标进入和离开2种状态的。