码迷,mamicode.com
首页 > 其他好文 > 详细

第一次交作业

时间:2015-10-09 00:43:54      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

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

第一次交作业

标签:

原文地址:http://www.cnblogs.com/sishiuliunian/p/4862727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!