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 ...
随机推荐
- StringBuffer的替换和反转和截取功能
A:StringBuffer的替换功能 * public StringBuffer replace(int start,int end,String str): * 从start开始到end用str替 ...
- 利用原生js制做数据管理平台，适合初学者学习
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- Centos6.7安装chrome
cd /etc/yum.repos.dwget http://people.centos.org/hughesjr/chromium/6/chromium-el6.repo yum install c ...
- 如何实现跨 Docker 主机存储？- 每天5分钟玩转 Docker 容器技术（73）
从业务数据的角度看,容器可以分为两类:无状态(stateless)容器和有状态(stateful)容器. 无状态是指容器在运行过程中不需要保存数据,每次访问的结果不依赖上一次访问,比如提供静态页面的 ...
- pmap 命令详解
通过查看帮助,返回了如下信息: Usage: pmap [options] pid [pid ...] Options: -x, --extended show detai ...
- 调用惯例Calling Convention （或者说：调用约定）
调用惯例影响执行效率,参数的传递方式以及栈清除的方式. 调用惯例 参数传递顺序 谁负责清除参数 参数是否使用暂存器 register 从左到右 被调用者 是 pascal 从左到右 被调用者 否 ...
- 初识HBase
现如今,分布式架构大行其道,实际项目中使用HBase也是比比皆是.虽说自己在分布式方面接触甚少,但作为程序猿还是需要不断的给自己充电的.网上搜索了一些教程,还是觉得<HBase权威指南>不 ...
- Qt中的坐标系统
Qt使用统一的坐标系统来定位窗口部件的位置和大小. 以屏幕的左上角为原点即(0, 0)点,从左向右为x轴正向,从上向下为y轴正向,这整个屏幕的坐标系统就用来定位顶层窗口: 此外,窗口内部也有自己的坐标 ...
- UI自动化测试（四）AutoIT工具使用和robot对象模拟键盘按键操作
AutoIT简介 AutoIt 目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/ ...
- hdu1671字典树
Phone List Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...