CSS做个五颜六色的风车

做个简单的风车

身为一个Java小白会用css做点风车不过分吧Pay attention to：this is living 风车，不是 lifeless 的风车*

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="../css/new_file.css" /></head><body><div class="container"><div class="box"><div class="box1 box2"></div><div class="box1 box3"></div><div class="box1 box4"></div><div class="box1 box5"></div>/*四片叶子做完了*/</div><div class="gan"></div>/*这是杆子*/</div></body>
</html>

这是名为 new_file.css的css文件

.container {border: 0px solid red;width: 700px;height: 600px;margin: 30px auto;
}.box {border: 0px solid red;width: 200px;height: 200px;margin: 20px auto;animation: animation1 2s linear infinite;/* 名称/一周期时间/线性变化/无线 */
}.box1 {width: 100px;height: 50px;border-radius: 50px 50px 0 0;position: relative;
}@keyframes animation1 {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.box2 {border: 0px solid greenyellow;background-color: blue;transform: rotate(90deg);position: relative;top: 25px;left: 75px;}.box3 {border: 0px solid blue;background-color: red;transform: rotate(180deg);position: relative;left: 100px;top: 50px;}.box4 {border: 0px solid red;background-color: orangered;transform: rotate(270deg);position: relative;left: 25px;top: 25px;
}.box5 {border: 0px solid orangered;background-color: greenyellow;transform: rotate(0deg);position: relative;/* 相对位置 */bottom: 100px;
}.gan {border: 2px solid saddlebrown;width: 10px;height: 400px;background-color: #008000;position: relative;left: 345px;bottom: 121px;z-index: -1;
}

注：这个风车会 rotating，自行脑补吧，哈哈（其实是因为我不会放动图）

CSS做个五颜六色的风车相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
[css] 当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？
[css] 当拿到一个新的项目,让你对这个项目的css做下架构设计,你该如何下手? 公共变量(主题色/主要空隙/主要字号字体等) 编译器(scss/less/postcss/stylus) 自适应方案 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介二.准备三.例子四.参考一.简介关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

CSS做个五颜六色的风车

做个简单的风车

CSS做个五颜六色的风车相关推荐

最新文章

热门文章