初学css3
<!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>
/*鼠标移上去改变颜色及大小和角度*/
.yl{ width:200px; height:200px; background-color:#0CF; text-align: center; line-height:200px;
transition:width 2s, height 2s;
-ms- transition:width 2s, height 2s,rotate 6s;
-o- transition:width 2s, height 2s,rotate 6s;
-webkit- transition:width 2s height 2s,rotate 6s;
-moz- transition:width 2s, height 2s,rotate 6s;
}
.yl:hover{ transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
font-size:21px;
background-color:#F33;
width:600px;
height:500px;
}
/*四个随意变换的方块*/
@keyframes myfrist{
0%{ background:#3F9;left:0;top:0;}
25%{ background:#0F9;left:100px;top:0}
50%{ background: #C06;left:200px;top:0}
75%{ background:#FF0;left:300px;top:0;}
100%{ background:#6F0;left:400px;}
}
@-ms-keyframes myfrist{
0%{ background:#3F9;left:0;top:0;}
25%{ background:#0F9;left:100px;top:0}
50%{ background: #C06;left:200px;top:0}
75%{ background:#FF0;left:300px;top:0;}
100%{ background:#6F0;left:400px;}
}
@-o-keyframes myfrist{
0%{ background:#3F9;left:0;top:0;}
25%{ background:#0F9;left:100px;top:0}
50%{ background: #C06;left:200px;top:0}
75%{ background:#FF0;left:300px;top:0;}
100%{ background:#6F0;left:400px;}
}
@-webkit-keyframes myfrist{
0%{ background:#3F9;left:0;top:0;}
25%{ background:#0F9;left:100px;top:0}
50%{ background: #C06;left:200px;top:0}
75%{ background:#FF0;left:300px;top:0;}
100%{ background:#6F0;left:400px;}
}
@-moz-keyframes myfrist{
0%{ background:#3F9;left:0;top:0;}
25%{ background:#0F9;left:100px;top:0}
50%{ background: #C06;left:200px;top:0}
75%{ background:#FF0;left:300px;top:0;}
100%{ background:#6F0;left:400px;}
}
.div1{
width:100px;
height:100px;
position:relative;
animation-name:myfrist;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play:running;
-moz-animation-name:myfrist;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direation:alternate;
-moz-animation-play:running;
-webkit-animation-name:myfrist;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direation:alternate;
-webkit-animation-play:running;
-o-animation-name:myfrist;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-nimation-iteration-count:infinite;
-o-animation-direation:alternate;
-o-animation-play:running;
-ms-animation-name:myfrist;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:2s;
-ms-nimation-iteration-count:infinite;
-ms-animation-direation:alternate;
-ms-animation-play:running;
}
.div2{
width:100px;
height:100px;
position:relative;
animation-name:myfrist;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:5s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play:running;
-moz-animation-name:myfrist;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direation:alternate;
-moz-animation-play:running;
-webkit-animation-name:myfrist;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direation:alternate;
-webkit-animation-play:running;
-o-animation-name:myfrist;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:5s;
-o-nimation-iteration-count:infinite;
-o-animation-direation:alternate;
-o-animation-play:running;
-ms-animation-name:myfrist;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:5s;
-ms-nimation-iteration-count:infinite;
-ms-animation-direation:alternate;
-ms-animation-play:running;
}
.div3{
width:100px;
height:100px;
position:relative;
animation-name:myfrist;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:10s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play:running;
-moz-animation-name:myfrist;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:10s;
-moz-animation-iteration-count:infinite;
-moz-animation-direation:alternate;
-moz-animation-play:running;
-webkit-animation-name:myfrist;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direation:alternate;
-webkit-animation-play:running;
-o-animation-name:myfrist;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:10s;
-o-nimation-iteration-count:infinite;
-o-animation-direation:alternate;
-o-animation-play:running;
-ms-animation-name:myfrist;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:10s;
-ms-nimation-iteration-count:infinite;
-ms-animation-direation:alternate;
-ms-animation-play:running;
}
.div4{
width:100px;
height:100px;
position:relative;
animation-name:myfrist;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:17s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play:running;
-moz-animation-name:myfrist;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:17s;
-moz-animation-iteration-count:infinite;
-moz-animation-direation:alternate;
-moz-animation-play:running;
-webkit-animation-name:myfrist;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:17s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direation:alternate;
-webkit-animation-play:running;
-o-animation-name:myfrist;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:17s;
-o-nimation-iteration-count:infinite;
-o-animation-direation:alternate;
-o-animation-play:running;
-ms-animation-name:myfrist;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:17s;
-ms-nimation-iteration-count:infinite;
-ms-animation-direation:alternate;
-ms-animation-play:running;
}
</style>
</head>
<body>
/*鼠标移上去改变颜色及大小和角度*/
<div class="yl">
三沙发现南海之眼
</div>
/*四个随意变换的方块*/
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</body>
</html>
