css3快速复习

选择器
边框、阴影
border-radius: 50%; 设置正圆形
背景的改变
CSS3重要的新东西：
● transition
过度，让一个元素从一个样式，变为另一个样式，不再是干蹦了，而是有动画，均匀的完成。
transition属性要写给元素的原来样式中，
transition:要过度的css属性 时长 是否匀速 延迟;
比如：transition:all 1s ease 0s;如果要匀速，写linear

transition属性什么时候能够触发？？
:hover可以触发过渡
JS直接控制元素的样式改变，也会触发过渡
JS控制加一个类名，也会触发过渡
★总结：一切能够让元素的CSS改变的行为，都能够触发过渡。

transition属性能够过渡什么属性？
基本上一切的属性，transition都可以过渡。
● transform
变形。实际上，就是让一个元素拥有“维度”

transform:rotateY(-40deg) rotateX(-40deg) translateZ(300px);
让一个盒子，绕Y轴旋转-40度，绕X轴旋转-40度，然后朝着自己现在所对的方向，前进300px。

● animation
CSS3中，:hover可以给任何标签设置，表示鼠标悬停的样式。
动画。和transition不一样，这个animation不需要触发条件，自己就能动。
animation: name duration timing-function delay iteration-count direction;
调用：
animation:tiao 1s ease 0s infinite alternate;

/*定义动画*/
@-webkit-keyframes tiao{
from {
top:200px;
}
to {
top:250px;
}
}

 

曲线运动
jQuery的animate无法完成曲线运动，必须要借助插件来完成。
jquery.path.js
path就是路径

转载于:https://www.cnblogs.com/fang8580/p/4603591.html