css+html创建一个大风车

最近刚学习了css3的动画，创建了一个大风车巩固知识，大家轻点喷

首先建立一个div盒子

div {position: relative;width: 400px;height: 400px;margin: 100px auto;}

然后在里面放四个小盒子和一个风车下面的棍子

<div><ul><li></li><li></li><li></li><li></li></ul><span></span>
</div>

盒子浮动

ul li {float: left;list-style: none;}

给每个盒子加上边框，制造三角形

    ul li:nth-child(1) {border: 100px solid red;border-bottom: 100px solid transparent;border-left: 100px solid transparent;transform-origin: right bottom;}ul li:nth-child(2) {border: 100px solid yellow;border-top: 100px solid transparent;border-left: 100px solid transparent;transform-origin: left bottom;}ul li:nth-child(3) {border: 100px solid blue;border-bottom: 100px solid transparent;border-right: 100px solid transparent;transform-origin: right top;}ul li:nth-child(4) {border: 100px solid green;border-top: 100px solid transparent;border-right: 100px solid transparent;transform-origin: left top;}

给下面的棍子加上背景位置

span {position: absolute;width: 10px;height: 800px;background-color: pink;left: 200px;margin-left: -5px;margin-top: 200px;border-top-left-radius: 50%;border-top-right-radius: 50%;}

创建一个动画

@keyframes move {0% {transform: rotate(0);}25% {旋转90度transform: rotate(90deg)}50% {transform: rotate(180deg)}75% {transform: rotate(270deg)}100% {transform: rotate(360deg)}}

给li加上动画，加上循环

ul li {float: left;list-style: none;animation-name: move;animation-duration: 1s;animation-iteration-count: infinite;暂停/* animation-play-state: paused; */}

好了，一个完美的小风车就完成了

css+html创建一个大风车相关推荐

[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
css按钮大小固定,在CSS中创建一个固定宽度的按钮
我有几个可变宽度的按钮,我希望它们都是一定的宽度.当我尝试添加width: 150px;时,它不起作用.如何创建这些全部具有设定宽度的按钮?在CSS中创建一个固定宽度的按钮 HTML Lorem Lo ...
【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
使用Html/Css简单创建一个菜单
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
不到50行代码，HTML+CSS+JS创建一个简单的色轮
简单,其实就是调库! 文档在这里 Get Started | iro.js 我也写了一个简单的样例在下面可以参考一下
[css] 用css创建一个三角形，并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器
倒计时功能,在很多地方都会用到,我们平时都习惯去用一些插件来应用,会减少不少的工作量,并且效果也能达到预期. 我今天并不是想分享什么倒计时插件,而是自己写一个简单的倒数计时器,有兴趣的同学可以往下看看 ...
使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始你要 ...
html 创建一个正方形,css 如何设置带有正方形项目的列表
css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件:然后使用ul无序列表标签,并指定"list-style-type"为"square"即可设置 ...

css+html创建一个大风车

css+html创建一个大风车相关推荐

最新文章

热门文章