十一七天假期，实在太嗨，和家里的亲戚朋友吃吃喝喝的，不过还是挤出时间来学习了，四天早上都去图书馆学习了，看看JQ视频了。
下面看一下我的四个作业，基本上都是CSS3的内容
第一个2D的转换：
<style type="text/css">
.ss{ width:200px; height:50px; background-color:#999999;}
.ss:hover{transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
</style>
<body>
<div class="ss">
</div>
</body>
鼠标悬停的时候，div顺时针旋转的效果。
第二个 3D的转换：
<style type="text/css">
.dd{ width:300px; height:50px; background-color:#00FF99;}
.dd:hover{transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
</style>
<body>
<div class="dd">这是一个方块</div>
</body>
</html>
鼠标悬停的时候，X轴Y轴都旋转的效果。
第三个 CSS3 动画：
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 10s;
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-o-animation:myfirst 10s; /* Opera */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:1000px; top:0px;}
50% {background:blue; left:1000px; top:500px;}
75% {background:green; left:0px; top:500px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:1000px; top:0px;}
50% {background:blue; left:1000px; top:500px;}
75% {background:green; left:0px; top:500px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:1000px; top:0px;}
50% {background:blue; left:1000px; top:500px;}
75% {background:green; left:0px; top:500px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:1000px; top:0px;}
50% {background:blue; left:1000px; top:500px;}
75% {background:green; left:0px; top:500px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
规定一个div的动画时间，背景颜色的变化。
第四个 CSS3 的过渡
<style type="text/css">
div{ width:200px; height:50px; background-color:#00FF99;}
div:hover{ width:400px; height:100px; background-color:#0033FF;}
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
</style>
</head>
<body>
<div></div>
鼠标悬停的时候，div的宽高背景颜色的变化以及时间。