标签：sla tencent line tools play ref pad css3动画 自己
过渡(在要进行改变的对象上写
-o-transition:all .3s ease-in-out ;
-ms-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
| 值 | 描述 |
|---|
| linear |
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in |
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out |
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out |
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
变化（旋转）
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
放大 修改scale(放大的值)
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
旋转放大 修改rotate(旋转度数) scale(放大值)
ransform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
上下左右移动 修改translate(x轴,y轴)
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);}
全背景
background-size:cover
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover
变灰色
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
阴影
box-shadow: 0px 0px 9px 1px #302e2e;
文字阴影
text-shadow: 0px 5px 5px rgba(0, 0, 0, .6);
————————————————————————————————————————————————————————————————————————————————————————
自定动画
必有属性
其它属性
-
animation-timing-function //缓动效果
-
animation-iteration-count //循环播放的次数
-
animation-delay //延时执行时间
-
animation-direction //动画运动的方向
animation-fill-mode //设置对象动画时间之外的状态animation-play-state //对象动画的状态
缩写
animation: [animation-name]
[animation-duration]
[animation-timing-function]
[animation-delay]
[animation-iteration-count]
[animation-direction]
[animation-fill-mode];
.recruit-l.on{
animation: slLeft 1s;
-moz-animation: slLeft 1s;
}
.recruit-r.on{
display: block;
animation: slright 1s;
-moz-animation: slright 1s;
}
动画方案设置：@keyframes 动画名{}
@keyframes slLeft{
0% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slright{
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
-o-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
100%{
transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
css3动画
标签：sla tencent line tools play ref pad css3动画 自己
原文地址：http://www.cnblogs.com/foxbat19/p/7872340.html
