CSS3制作旋转的小风车
制作旋转小风车
一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个,
css样式
*{
margin:0;
padding:0;
}
box{
display:flex;/*将容器设置为伸缩盒,和设置float效果一样*/
flex-wrap:wrap;/*换行*/
margin:0 auto;
width:400px;
height:400px;
}
.box1{
width:200px;
height:200px;
background:red;
}
.box2{
width:200px;
height:200px;
background:yellow;
}
.box3{
width:200px;
height:200px;
background:green;
}
.box4{
width:200px;
height:200px;
background:purple;
}
body内容
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
二 我现在要把小盒子(正方形)变成半圆用到border-radius,变成半圆之后,半圆可能不会在你想要的位置用margin-top和margin-left作调整,给一个圆心让它定位放置在风车的中心.(1 如果不知道如何设置半圆,有弧度的位置是数字没弧度的位置设0 px 2半弧对应的直径,以直径为参考点直径位置上为0px,弧度所对应的位置为多少像素)
CSS样式
.box{
display:flex;/*将容器设置为伸缩盒,和设置float效果一样*/
flex-wrap:wrap;/*换行*/
margin:0 auto;
width:400px;
height:400px;
border:1px solid red;/*把小盒子放到大盒子,有了边框看起来清楚*/
}
.circle{
position:absolute;/*绝对*/
left:188px;
top:189px;
width:25px;
height:25px;
border-radius:25px;
background:#000;
}
.box1{
width:200px;
height:100px;
background:red;
border-radius:100px 100px 0 0;/*左上角,右上角,右下角,左下角*/
margin-top:100px;
}
.box2{
width:100px;
height:200px;
background:yellow;
border-radius:0 100px 100px 0;
}
.box3{
width:100px;
height:200px;
background:green;
border-radius:100px 0 0 100px;
margin-top:200px;
margin-left:-200px;
}
.box4{
width:200px;
height:100px;
background:purple;
border-radius: 0 0 100px 100px ;
margin-top:200px;
}
三 最后给大盒子动画效果,这样小风车就做好啦!
前面代码看不清楚没关系,下面是所有的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转的风车</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes animation{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg);
}
}
.box{
display:flex;/*将容器设置为伸缩盒,和设置float效果一样*/
flex-wrap:wrap;/*换行*/
margin:0 auto;
width:400px;
height:400px;
/*border:1px solid red;*/
position:relative;/*相对*/
animation-name:animation;/*动画名称*/
animation-duration:1s;/*动画持续时间*/
animation-iteration-count:infinite;/*循环次数infinite无限循环*/
animation-timing-function:linear;/*动画的过度类型 linear线性过渡*/
}
.box:hover{
animation-play-state:paused;/*当鼠标按下时暂停*/
}
.circle{
position:absolute;/*绝对*/
left:188px;
top:189px;
width:25px;
height:25px;
border-radius:25px;
background:#000;
}
.box1{
width:200px;
height:100px;
background:red;
border-radius:100px 100px 0 0;/*左上角,右上角,右下角,左下角*/
margin-top:100px;
}
.box2{
width:100px;
height:200px;
background:yellow;
border-radius:0 100px 100px 0;
}
.box3{
width:100px;
height:200px;
background:green;
border-radius:100px 0 0 100px;
margin-top:200px;
margin-left:-200px;
}
.box4{
width:200px;
height:100px;
background:purple;
border-radius: 0 0 100px 100px ;
margin-top:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="circle"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
但愿给迷茫中的你一点提示
CSS3制作旋转的小风车的更多相关文章
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- css3制作旋转立方体相册
首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
随机推荐
- HDFS伪分布式环境搭建
(一).HDFS shell操作 以上已经介绍了如何搭建伪分布式的Hadoop,既然环境已经搭建起来了,那要怎么去操作呢?这就是本节将要介绍的内容: HDFS自带有一些shell命令,通过这些命令我们 ...
- Python3 初识Python
一 Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- POJ 3856 deltree（模拟）
Description You have just run out of disk space and decided to delete some of your directories. Rati ...
- VS2010历史记录清理
把如下粘贴到文本文件里,另存为批处理文件.(后缀为 *.bat)双击执行就可 @echo off cd \ @echo on @REG Delete HKEY_CURRENT_USER\Softwar ...
- ASP.NET程序中设置相对路径的方法
如图所示,这是个绝对路径. 改为相对路径的方法是:AppDomain.CurrentDomain.BaseDirectory. 如下图所示:
- Flink之状态之状态获取
1.什么是状态 对于任何一个操作,都可以被看成是一个函数,比如y=f(x),如果对于同一个x的任何一次输入,得到的y都是相同的,则可以认为这个函数是无状态,否则,这个函数就是有状态的.Flink的一大 ...
- gdb查看内存中所有的信息
他们会把做内核的人当成无所不能的,认为你们对反编译啥的都应该会. 俗话说的好,人要活成别人想要的样子嘛: 看下如何停止进程,让大家看到内存中到底是啥样子; 简单的print globalA当然能输出来 ...
- DataBase -- JOIN
SQL JOIN:用于根据两个或多个表中列的关系,从这些表中查数据. (为了得到完整数据,我们需要从两个或多个表中获取结果.) 例如W3School中列出的实例,使用如下语句: select Pers ...
- vim配置入门，到豪华版vim配置
这几天一直研究vim的配置,许多版本总是不尽如人意,网上确实有许多优秀的文章值得参考,我的博客后面会贴上具有参考价值的博客链接,本文的将手把手教你配置一个功能详尽的vim. 首先你要明白的是linux ...
- 洛谷 P2827 蚯蚓 解题报告
P2827 蚯蚓 题目描述 本题中,我们将用符号 \(\lfloor c \rfloor\) 表示对 \(c\) 向下取整,例如:\(\lfloor 3.0 \rfloor = \lfloor 3.1 ...