css3的动画确实非常绚丽！浏览器兼容性很重要！。
分享两个小动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>C3动画</title>
<style>
/*****************/
#d1{width:50px;height:50px;background-color:green;float:left;
border-radius:50%;}
#d2{width:50px;height:50px;background-color:red;float:left;
border-radius:50%;position:relative;}
@-webkit-keyframes jump{
0%{transform:rotate(0deg);opacity:1;}
25%{transform:rotate(-10deg);opacity:0.5;}
50%{transform:rotate(0deg);opacity:1;}
75%{transform:rotate(10deg);opacity:0.5;}
100%{transform:rotate(0deg);opacity:1;}
}
#d1{-webkit-animation:jump 0.3s linear infinite;}
@-webkit-keyframes move{
0%{left:10px;background-color:blue;}
50%{left:800px;background-color:yellow;}
100%{left:10px;background-color:red;}
}
#d2{-webkit-animation:move 5s linear infinite;}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
效果如本博客首页那两个小圆圈！
需要注意的是：
1、在css里创建动画时候要处理兼容性
2、在调用的时候不单要处理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;
还要注意animation：animation-name,animation-duration,animation-timing-function,animation-iteration-count
animation-name:是用来定义一个动画的名称
animation-duration是用来指定元素播放动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式.
具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。
时间： 2024-12-17 15:54:34