css3 动画
创建动画:@keyframes 规则
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
改变背景色和位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
css3 渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
从上到下的线性渐变:
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
从左到右的线性渐变
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
从左上角到右下角的线性渐变
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
带有指定的角度的线性渐变:
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
带有多个颜色节点的从上到下的线性渐变:
#grad {
background-image: linear-gradient(red, yellow, green);
}