您的位置：首页 > 其它

第一次交作业

2015-10-09 00:00 92 查看

　　十一七天假期，实在太嗨，和家里的亲戚朋友吃吃喝喝的，不过还是挤出时间来学习了，四天早上都去图书馆学习了，看看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的宽高背景颜色的变化以及时间。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航