css3+div画大风车
今天已经礼拜三了，周天小颖家的佩佩就要结婚啦，小颖要去当伴娘了，哈哈哈哈哈哈，想想都觉得乐开了花，不过之前她给我说让我当她伴娘时，我说我要减肥，不然她那么瘦弱，我站旁边就感觉像一个圆滚滚的小皮球，小颖太胖了，唉主要是管不住嘴啊，太爱吃了，这样下去真的不好不好不好，迟早有一天会把称压坏了的，哈哈哈哈不开玩笑啦。
下面呢我们来看看到底画了个怎样的大风车呢，嘻嘻，其实这也不是小颖自己想出来的，是借鉴别人画的，小颖自己也敲了下，稍微做了些改动哈哈哈哈。
|
大风车吱呀吱哟哟地转 这里的风景呀真好看 天好看地好看 还有一起快乐的小伙伴 大风车转啊转悠悠 快乐的伙伴手牵着手 牵着你的手 牵着我的手 今天的小伙伴 明天的好朋友 好朋友 大风车吱呀吱哟哟地转 这里的风景呀真好看 天好看地好看 还有一起快乐的小伙伴 大风车转啊转悠悠 快乐的伙伴手牵着手 牵着你的手 牵着我的手 今天的小伙伴 明天的好朋友 好朋友 |
有没有想起儿时的看动画片的场景啊，记得小时候每次动画片开始之前都会放这首《大风车》歌曲，哈哈哈，有兴趣的亲们可以去下载听听回一下儿时的美好，那这个到底是怎么实现的呢？在上代码之前大家先去普及下css3中：animation、background: linear-gradient()、transparent属性。
重点来啦！！！！！当当当当！
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>css画大风车</title>
<style type="text/css">
.wrap {
width: 320px;
height: 320px;
position: absolute;
animation: rotate 2s linear infinite;
/* animation: name duration timing-function delay iteration-count direction;
rotate name 动画名字
2s duration 规定完成动画所花费的时间，以秒或毫秒计。
linear timing-function 规定动画的速度曲线，动画从头到尾的速度是相同的。
infinite iteration-count 规定动画应该播放的次数，规定动画应该无限次播放。*/
} .box1,
.box2,
.box3,
.box4 {
width: 160px;
height: 160px;
position: absolute;
} .box1 {
left: 80px;
background: linear-gradient(to right, #00ced1 50%, transparent 50%);
border-radius: 80px 0 0 80px;
} .box2 {
right: 0;
background: linear-gradient(to bottom, #ff4500 50%, transparent 50%);
border-radius: 80px 80px 0 0;
top: 80px;
} .box3 {
left: 80px;
background: linear-gradient(to left, #ffc0cb 50%, transparent 50%);
border-radius: 0 80px 80px 0;
top: 160px;
} .box4 {
top: 80px;
background: linear-gradient(to top, #d4dc14 50%, transparent 50%);
border-radius: 0 0 80px 80px;
} .gunzi {
width: 20px;
height: 260px;
background: black;
position: absolute;
z-index: -1;
top: 168px;
left: 160px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head> <body>
<div class='Windmill-centent'>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="gunzi"></div>
</div>
</body> </html>
css3+div画大风车的更多相关文章
- 用CSS3.0画圆
CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或 ...
- 用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
- 前端知识总结--css用div画环形圆
如何用最少的div画最多的环形?如下图所示最少需要多少个div? 暂时想到的利用div的边框.内外阴影及befor和after的伪元素实现 以下代码可以实现上图效果: <style> di ...
- css3 div垂直居中
css3: #dd{ height: 300px; background: #0000cc; display: -webkit-box; display: flex; display: -webkit ...
- 用div画三角/矩形/圆
1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...
- 【css3】画‘百分比圆’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3实现画对号动画
目标:实现对号动画,慢慢画出来的感觉: 原理:外层div的背景是一个对号图片,用一个div做遮罩,让遮罩div层从左到右做运动一次即可实现动画,需要注意的是遮罩div的初始位置应该在外层div的外面: ...
- WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字
<!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;he ...
- CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- mysql 1093错误
1093错误:修改一个表的时候子查询不能是同一个表 解决办法:把子查询再套一层,变成原来表的孙子查询就可以了 例如: INSERT INTO gg SET id3=(SELECT c.a+1 FROM ...
- MongoDB 分布式架构 复制 分片 适用性范围
转载自 http://www.mongoing.com/archives/3573
- Flex布局介绍
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为 Flex 布局. .box{ display: -web ...
- S3C2440 时钟设置分析(FCLK, HCLK, PCLK)
时钟对于一个系统的重要性不言而喻,时钟决定了系统发送数据的快慢,高性能的芯片往往能支持更快速度的时钟,从而提供更好的体验. S3C2440的输入时钟频率是12MHZ,对于这款芯片,显然速度是不够的,所 ...
- Spring框架（一）
Spring: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由 Rod Johnson在其著作 Expert One-On-One J2EE Deve ...
- Prison Break
Prison Break 时间限制: 1 Sec 内存限制: 128 MB提交: 105 解决: 16[提交][状态][讨论版] 题目描述 Scofild又要策划一次越狱行动,和上次一样,他已经掌 ...
- Prometheus : 入门
Prometheus 是一个开源的监控系统.支持灵活的查询语言(PromQL),采用 http 协议的 pull 模式拉取数据等特点使 Prometheus 即简单易懂又功能强大. Prometheu ...
- 高德地图测两点距离android比较精确的
/////参考资料:高德官方:[http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation] 主要三 ...
- iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享
- 个人工作中ssd、audio python脚本总结
1.os.system(cmd)或者os.popen(cmd)调用外部命令 cmd中需要注意特殊字符的转义功能,如: USBSTOR\DISK&VEN_GENERIC-&PROD_SD ...