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 ...
随机推荐
- 关于搭建php电商环境时缺少fileinfo、数据库安装出错问题解决办法
今天以WSTMart电商系统为例讲解 搭建php电商环境缺少fileinfo.数据库安装出错问题找了很多方法都没能很好解决,该方法简单明了,容易操作 首先需要到开源中国中下载该系统源码,网址为:htt ...
- 使用STS时遇到的小“麻烦”
背景 今天尝试着用STS(Spring Tool Suite)建立了一个Maven webapp来做一个SpringMVC的小demo,在使用的过程中就遇到了一些小麻烦!!记录在此的目的,其一是为了自 ...
- 教育，创新，提升：Indiegogo和Kickstarter上受中国用户支持的10个众筹项目
中国的经济正在迅速发展,已成为世界第二大经济体.中国家庭随着经济水平的提高,越来越多父母愿意将自己的子女送到海外留学. 家长们希望自己的子女可以有机会接受国外大学优质的教育, 以便他们将来可以学成归来 ...
- 每周分享之 二 http协议(2)
本次分享http协议,共分为三部分,这是第二部分,主要讲解请求与响应的字段,以及状态码. 以http/1.1版本的一个完整的请求与响应作为例子 http请求信息由三部分组成 1.请求方法(GET/PO ...
- MySQL or MariaDB 错误解决方法之报错代码1045
phpMyAdmin登录报错:mysqli_real_connect(): (28000/1045): Access denied for user 'root'@'localhost' (using ...
- 我的第一个python web开发框架（5）——开发前准备工作（了解编码前需要知道的一些常识）
中午吃饭时间到了,小白赶紧向老菜坐的位置走过去. 小白:老大,中午请你吃饭. 老菜:哈哈...又遇到问题了吧,这次得狠狠宰你一顿才行. 小白:行行行,只要您赏脸,米饭任吃,嘻嘻,我们边走边聊. ... ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- C#分布式事务解决方案-TransactionScope
引用一下别人的导读:在实际开发工作中,执行一个事件,然后调用另一接口插入数据,如果处理逻辑出现异常,那么之前插入的数据将成为垃圾数据,我们所希望的是能够在整个这个方法定义为一个事务,Transacti ...
- Mysq基础
本文是之前看博客时候的记录,忘记是哪位仁兄的了,在这只做一次转载: 常见误区 count(1)和count(primary_key) 优于 count(*) 很多人为了统计记录条数,就使用 count ...
- EasyUI DataGrid使用示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx. ...