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 ...
随机推荐
- PolarDB · 新品介绍 · 深入了解阿里云新一代产品 PolarDB
背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...
- Jacoco远程统计tomcat服务（Windows系统）的代码覆盖率
Jacoco远程统计tomcat服务(Windows系统)的代码覆盖率 2017-09-21 目录 1 Jacoco的安装和设置 1.1 什么是Jacoco? 1.2 Jacoco安装 1.3 ...
- 一种Webconfig自动化升级方法
1.方法功能 使用本方法,可以将开发环境最新版本的web.config结构与生产环境环境的config融合,而不用考虑两个config的版本差异值是多少.使用一种标记的方式,在开发环境webconfi ...
- 1 Spring Cloud Eureka服务治理（下）
注:此随笔为读书笔记.<Spring Cloud微服务实战> 上篇主要介绍了什么是微服务以及微服务治理的简单实现,如微服务注册中心的实现.微服务注册的实现.微服务的发现和消费的实现.微服务 ...
- 关于IOS的屏幕适配（iPhone）——资源适配
IOS的屏幕适配几乎不需要大量的代码操作,更多的时间我们只是动动鼠标选择一下就搞定.可以苹果在这方面做的还是比较人性的,解放了开发者. 首先来说说Iphone这几种屏(由于最近做的是iPhone AP ...
- 利用原生js制做数据管理平台，适合初学者学习
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- Split分割字符串
第一种方法:打开vs.net新建一个控制台项目.然后在Main()方法下输入下面的程序. string s="abcdeabcdeabcde"; string[] sArray=s ...
- 【重点突破】——Cookie的使用
cookie:小甜饼 cookie:保存客户端浏览器中一个纯文本文件 版本高的浏览器可查看 F12->Resource 左下方cookie 查看 cookie作用: 保存:[安全性要 ...
- 推荐系统相关算法(1)：SVD
假如要预测Zero君对一部电影M的评分,而手上只有Zero君对若干部电影的评分和风炎君对若干部电影的评分(包含M的评分).那么能预测出Zero君对M的评分吗?答案显然是能.最简单的方法就是直接将预测分 ...
- Python in/not in --- if not/if + for...[if]...构建List+ python的else子句
区分几个容易出错的地方: in 成员运算符 - 如果字符串中包含给定的字符返回 True >>>"H" in a True not in 成员运算符 - 如果字符 ...