制作旋转小风车

一我先搭建一个大盒子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>

但愿给迷茫中的你一点提示

转载于:https://www.cnblogs.com/DCL1314/p/7327787.html

CSS3制作旋转的小风车相关推荐

用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
用css3-做一个旋转的小风车
做一个风车需要我们有四个div小盒子,在小盒子里面放一个半圆,然后使用定位将四个半圆分别放在对应的位置,最后就可以加动画效果使半圆旋转,以达到小风车的旋转效果了 1.首先我们在html完成其基本的结构 ...
Java风车动画代码_纯DOM+CSS3实现简单的小风车动画
html> 小风车-转啊转 html { font-size: 10px; } html * { -webkit-box-sizing: border-box; box-sizing: bord ...
CSS3 制作旋转的大风车
发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车. src="http://help.dili360.com/windmill.shtml& ...
HTML制作动画制作动态大风车,CSS3 制作旋转的大风车(充满童年回忆)
发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车. css3 大风车提示:您可以先修改部分代码再运行 HTML: 复制代码代码如下: 实现过程:首先 ...
css3制作旋转相册、骰子
本来是想搞一个立方体图片,结果刚好想到了骰子就在源代码上进行了一些调整废话不多说,双手献上代码供各位点评,下面这段是通过cv大法搞来的(侵权必删) 1:3d立方体相册 css样式 .content ...
CSS3实现一个小风车
前言用CSS3实现了一个小风车的效果效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
css3之制作旋转小风车
下面教大家做一个旋转小风车,所用知识与我上一篇的爱心特效有相似之处,大家可以看看我前面发的文章,好了,下面就展示我的代码吧 <!DOCTYPE html> <html> < ...

CSS3制作旋转的小风车

制作旋转小风车

一我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个,

三最后给大盒子动画效果,这样小风车就做好啦!

前面代码看不清楚没关系,下面是所有的代码

CSS3制作旋转的小风车相关推荐

最新文章

热门文章

CSS3制作旋转的小风车

制作旋转小风车

一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个,

三 最后给大盒子动画效果,这样小风车就做好啦!

前面代码看不清楚没关系,下面是所有的代码

CSS3制作旋转的小风车相关推荐

最新文章

热门文章

一我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个,

三最后给大盒子动画效果,这样小风车就做好啦!