|
昨晚看了w3school的CSS3动画属性，发现演示动画很有意思，就仿制了一个类似的来玩，对于提高自己的CSS学习积极性很有帮助哈哈哈哈哈~
演示地址：点击打开链接
·今天又发现了记事本打开导致文字译码错误的BUG，正在苦思冥想解决中。。。
代码附上，如下，很简单~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:200px;
height:130px;
background-color:red;
padding:20px;
text-align:center;
font-size:18px;
font-family:"幼圆";
/*设置动画及播放时间*/
animation:myfirst 5s;
/*设置动画轮播次数*/
animation-iteration-count:100;
}
/*规定动画效果*/
@keyframes myfirst{
0%{
background-color:#F33;
margin-left:0;
margin-top:0;
font-size:18px;
transform:rotate(-30deg);
}
25%{
background-color:yellow;
margin-left:200px;
margin-top:0;
font-size:26px;
/*顺时针旋转45度*/
transform:rotate(30deg);
}
50%{
background-color:#06F;
margin-left:200px;
margin-top:200px;
font-size:18px;
transform:rotate(-30deg);
}
75%{
background-color:#0C0;
margin-left:0;
margin-top:200px;
font-size:26px;
transform:rotate(30deg);
}
100%{
background-color:#F33;
margin-left:0;
margin-top:0;
font-size:18px;
transform:rotate(-30deg);
}
</style>
</head>
<body>
<div class="testdiv">
这个盒子会动哇
</div>
</body>
</html>
| 
转播
