您的位置：首页 > Web前端 > CSS

HTML+CSS大风车及十字架的实现

2015-08-31 18:10 609 查看

说起大风车勾起了多少人的回忆，

我们今天就利用CSS做一个大风车并且让它转起来。

首先还是老规矩——先上效果图：

一................ 不是说好了转起来的吗？怎么在那不动啊。哈哈哈。。。。

老毛病又犯了是不，不要着急嘛。

由于不会搞视频，只能等你们自己做出来，你们再去看效果吧，真的很炫酷的哦！

HTML代码：

<!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>
<link rel="stylesheet" type="text/css" href="cross.css">
</head>

<body>
<div id="overall">
<div id="first"></div>
<div id="second"></div>
<div id="third">
<img src="3D.ico">
</div>
<div id="fourth"></div>
<div id="fifth"></div>
</div>
</body>

</html>

代码很少同样也很简单，就是五个div进行的定位组成的大风车

来看看是怎么定位的吧：

div {
width: 100px;
height: 100px;
/*float: left;*/
position: absolute;
border-color: orange;
border-radius: 20px;
/*border-spacing: 5px;*/
}

#overall {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
border: none;
animation：myanim 3s infinite;
-webkit-animation: myanim 3s infinite;
}

#first {
background-color: #63A12C;
left: 100px;
}

#second {
background-color: #2C34A1;
top: 100px;
}

#third {
background-color: #3D82B7;
top: 100px;
left: 100px;
}

img {
width: 24px;
height: 24px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -12px;
margin-left: -12px;
}

#fourth {
background-color: #A92D7F;
top: 100px;
left: 200px;
}

#fifth {
background-color: #2ACBB6;
top: 200px;
left: 100px;
}
/* 旋转效果*/
@keyframes myanim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}

@-webkit-keyframes myanim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}

同学会问怎么让它动起来的呢？

嘿嘿嘿

，就在上面那段你看不懂的代码，

搞回去细细琢磨一下吧。

第二种样式只有CSS和上面略微不同：

div {
width: 100px;
height: 100px;
/*border-radius: 50%;*/
}

.overall {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
display: block;
/*    -webkit-transition:0.4s linear;
-webkit-transition:0.4s ease-in;*/
-webkit-transition: all 1s ease-in-out;
}

#first {
background-color: #63A12C;
margin-left: 100px;
}

#second {
background-color: #2C34A1;
margin-right: 200px;
}

#third {
background-color: #3D82B7;
margin-left: 100px;
margin-top: -100px;
}

img {
width: 24px;
height: 24px;
/*µÚÒ»ÖÖ·½·¨*/
/*    position: absolute;
left: 50%;
top: 50%;
margin-top: -12px;
margin-left: -12px;*/
margin-top: 38px;
margin-left: 38px;
}

#fourth {
background-color: #A92D7F;
margin-left: 200px;
margin-top: -100px;
}

#fifth {
background-color: #2ACBB6;
margin-left: 100px;
}

.overall:hover {
-webkit-transform: rotate(180deg) scale(3.0) translate(100px, 0);
}

第三种：

div {
width: 100px;
height: 100px;
border-radius: 50%;
}

.overall {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
}

#first {
background-color: #3D82B7;
margin-left: 100px;
}

#second {
background-color: #2C34A1;
margin-right: 200px;
}

#third {
background-color: #9400D3;
margin-left: 100px;
margin-top: -100px;
display: table;
text-align: center;
-webkit-transition: background-color 1s ease-in;
}

#third:hover {
background-color: #32CD32;
}

.img {
display: table-cell;
vertical-align: middle;
}

#fourth {
background-color: #A92D7F;
margin-left: 200px;
margin-top: -100px;
}

#fifth {
background-color: #2ACBB6;
margin-left: 100px;
}

好了这三种方法回去试一下吧，

有助于帮助你学习CSS中的定位

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

标签：

相关文章推荐

新的分享

章节导航