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

趣味CSS3(一)--旋转的大风车

2016-12-04 14:41 309 查看

这是一个比较酷炫一点的大风车，不断旋转的大风车。纯碎是用CSS3来写的。

我就直接把整个页面写出来了，有需要的同学，直接复制就OK了。

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>大风车-转啊转</title>
<style>
#box {
width: 400px;
height: 400px;
margin: 200px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}

.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
background-image: linear-gradient(red, yellow);
}

.css1 {
top: 100px;
}

.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px
b8a9
;
z-index: 10;
background-image: radial-gradient(yellow, #fff);
}

.hhh {
width: 2px;
height: 350px;
background-image: radial-gradient(yellow, #fff);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}

@keyframes dfc {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate( 90deg);
-moz-transform: rotate( 90deg);
-ms-transform: rotate( 90deg);
-o-transform: rotate( 90deg);
transform: rotate( 90deg);
}
50% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>

<body>
<div id="box">
<div id="main">
<div class="css1"></div>
<div class="css2"></div>
<div class="css3"></div>
<div class="css4"></div>
<div class="ssss"></div>
</div>
<div class="hhh"></div>
</div>

</body>

</html>

嗯哈，其实也不难。效果还是蛮炫的。

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

标签：

相关文章推荐

新的分享

章节导航