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

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

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

HTML+CSS大风车及十字架的实现相关推荐

html风车相册代码,Css Html 大风车(示例代码)
简介这篇文章主要介绍了Css Html 大风车(示例代码)以及相关的经验技巧,文章约3675字,浏览量138,点赞数2,值得参考! div{ border-radius: 50%;position: ...
css定位“十字架“之水平垂直居中
1.先看要实现的效果实际的效果图可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...
css3绘制十字架,纯css画十字架 8.21
好久没玩这个了,继续. 绘制一个如图红色十字架,方块长150px,宽50px: 要求: 使用2个div完成使用3个div完成使用5个div完成两个div: html: css: .a,.b {p ...
CSS制作大风车动画及花朵
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
css+html创建一个大风车
最近刚学习了css3的动画,创建了一个大风车巩固知识,大家轻点喷首先建立一个div盒子 div {position: relative;width: 400px;height: 400px;marg ...
大风车动画（css）
文章来自:源码在线https://www.shengli.me/css/87.html 效果图展示(图): 代码实现:
css页面重构面试题
偶然间又看到博客园中这两道页面重构面试题. 题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架. 思路:水平垂直均居中的实现,当然非absolu ...
CSS中的路径裁剪样式clip-path
前面的话 CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...

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

HTML+CSS大风车及十字架的实现相关推荐

最新文章

热门文章