HTML+CSS大风车及十字架的实现_使用 html、css 实现如下面图片所示的“十字架形状”-CSDN博客

本文链接：https://blog.csdn.net/zmzwll1314/article/details/48137725

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

我们今天就利用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中的定位