第一次交作業

標籤：

　　十一七天假期，實在太嗨，和家裡的親戚朋友吃吃喝喝的，不過還是擠出時間來學習了，四天早上都去圖書館學習了，看看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的寬高背景顏色的變化以及時間。

第一次交作業