css @keyframes规则
css3里有一个@keyframes规则 使用它可以创建一个简单的动画
创建动画的原理是将一套css样式逐渐变化成另一套样式
以百分比%来规定改变发生的时间 或使用from和to 等价于0% 100%
0%是动画开始的时间100%动画结束的时间 应该始终定义0%和100%
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>上面这个例子会变换位置并改变颜色
在动画完成时它会回到原来的样子 位置
目前浏览器不支持@keyframes 规则
需要在你使用的浏览器前加标示
火狐
@-moz-keyframes
Safari 和 Chrome @-webkit-keyframes
Opera @-o-keyframes myfirst
相关推荐
nicepainkiller 2020-07-24
CSSEIKOCS 2020-07-18
冰蝶 2020-07-04
sdbxpjzq 2020-06-25
CaiKanXP 2020-06-13
lanzhusiyu 2020-06-09
opspider 2020-06-06
buttonChan 2020-06-06
heavenautumn 2020-05-31
MaureenChen 2020-05-17
zhanghao 2020-05-10
waterv 2020-05-04
xiaohuli 2020-04-22
coulder 2020-04-14
沈宫新 2020-04-10
coulder 2020-04-07
nicepainkiller 2020-02-23
teresalxm 2020-02-23
NARUTOLUOLUO 2011-06-24