AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS 绘制小风车

2023-11-02 55
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS 绘制小风车

前言

记得我十岁的时候，妈妈给我买了一台人生中第一台电风扇，十岁就有一台自己的电风扇，你敢想吗，它比真的很漂亮。我很喜欢这个小风车 啊~，一直小心地保存着。每当夏天来临时，只要按下开关，小风车就会给我送来一阵凉丝丝的清风。这台小风车是塑料做的。圆圆的风罩里有三片灰白的风叶，中间有个黑色的转轴，风罩是白色的。风叶一转起来，可真像五彩的棒棒糖，好看极了。小风车的机头和机身是全白的。机身上面画着一朵美丽的龙，周围被保护罩围着。机头里面有一个小型电动机，通电以后，小风车就会发出“啊啊”的声音，风叶也跟着转了起来。小电扇的底座是粉色的。底座上还有4个按钮，一个是电源开关，另外的是小风车的档位。小电扇的底座有一个暗门，这里就是电池的家，全靠它，小电扇才能好好工作。由于学习原因，不能把小风车带来学校，所以我只能用我毕生所学的知识来复刻一个差不多的小风车，以此来怀念它

实现效果

image.png

实现过程

html

  • 首先先从html开始，将风扇和切换按钮分离，对于风扇结构来说，我相信很多人会以为这是图片，但是其实这个是通过border-radius属性画出的扇页形状，再通过三根横竖的棍子拼接成了风扇的形状


<input type="radio" name="fan" id="zero"/>
<input type="radio" name="fan" id="one" checked="true"/>
<input type="radio" name="fan" id="two"/>
<input type="radio" name="fan" id="three"/>
<div class="scene">
  <div class="fan">
    <div class="fan__base">
      <div class="cuboid base">
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
      </div>
    </div>
    <div class="fan__controls">
      <label class="fan__control" for="zero">
        <div class="cuboid control">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </label>
      <label class="fan__control" for="one">
        <div class="cuboid control">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </label>
      <label class="fan__control" for="two">
        <div class="cuboid control">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </label>
      <label class="fan__control" for="three">
        <div class="cuboid control">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </label>
    </div>
    <div class="fan__spine">
      <div class="cuboid spine">
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
      </div>
    </div>
    <div class="fan__head">
      <div class="fan__rotater">
        <div class="cuboid rotater">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
        <div class="fan__stalk">
          <div class="cuboid stalk">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
      </div>
      <div class="fan__barrel">
        <div class="cuboid barrel">
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </div>
      <div class="fan__housing">
        <div class="fan__housing-rear"></div>
        <div class="fan__blades">
          <div class="fan__blade"></div>
          <div class="fan__blade"></div>
          <div class="fan__blade"></div>
        </div>
        <div class="fan__housing-front"><img src="img/avatar.webp"/></div>
      </div>
    </div>
  </div>
</div>

CSS

  • 1.颜色


:root {
  --blade-speed: 1;
  --rotation: 25;
  --fan-speed: 2;
  --state: running;
  --bg: skyblue;
  --shade-one: rgb(242, 233, 233);
  --shade-two: rgb(242, 233, 233);
  --shade-three: rgb(242, 233, 233);
  --shade-four: rgb(242, 233, 233);
  --shade-five: rgb(242, 233, 233);
  --shade-six: #b3b3b3;
  --shade-seven: rgb(242, 233, 233);
  --shade-eight: rgb(242, 233, 233);
  --cage-one: rgba(40, 137, 161, 0.2);
  --cage-two: rgba(40, 137, 161, 0.2);
}
  • 2.设置body

css

复制代码

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  transform: scale(0.75);
}
  • 3.设置动画


@-webkit-keyframes fan {
  0%,
  5% {
    transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * 1deg));
  }
  95%,
  100% {
    transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * -1deg));
  }
}
@keyframes fan {
  0%,
  5% {
    transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * 1deg));
  }
  95%,
  100% {
    transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * -1deg));
  }
}
@-webkit-keyframes rotate {
  from {
    transform: translate3d(-50%, -50%, -1px) rotate(0deg);
  }
  to {
    transform: translate3d(-50%, -50%, -1px) rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: translate3d(-50%, -50%, -1px) rotate(0deg);
  }
  to {
    transform: translate3d(-50%, -50%, -1px) rotate(360deg);
  }
}
  • 4.背后摇头显示


.stalk {
  --thickness: calc(40 * 0.05);
}
.stalk div {
  background: var(--shade-four);
}
.stalk div:nth-of-type(1) {
  background: var(--shade-three);
}
.stalk div:nth-of-type(5) {
  background: var(--shade-five);
}
.stalk div:nth-of-type(4) {
  background: va(--shade-eight);
}
  • 5.设置遥控器按钮


.control {
  --thickness: calc(((40 * 0.5) - ((40 * 0.5) * 0.18)) / 3);
}
.control div {
  background: var(--shade-five);
}
.control div:nth-of-type(1) {
  background: var(--shade-three);
}
.control div:nth-of-type(5) {
  background: var(--shade-six);
}
.control div:nth-of-type(4) {
  background: va(--shade-eight);
}
  • 6.设置cuboid


.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，这个小风车简直就和我妈妈买的一模一样，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

文章标签：
前端开发
关键词：
CSS小风车
CSS风车
syst1_m
目录
相关文章
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript 开发者
CSS动画新挑战：纯CSS实现的小风车效果！
CSS动画新挑战：纯CSS实现的小风车效果！
游客fz577umxdejsg
60 0
daisy`
|
6月前
|
前端开发
css实现风车样式
css实现风车样式
daisy`
39 0
掘金防诈骗集团CEO
|
前端开发 JavaScript
正值初夏,用CSS画一个七彩风车
正值初夏,用CSS画一个七彩风车
掘金防诈骗集团CEO
151 0
正值初夏,用CSS画一个七彩风车
掘金防诈骗集团CEO
|
前端开发
正值初夏,用CSS教你画夏天常玩的四彩小风车
正值初夏,用CSS教你画夏天常玩的四彩小风车
掘金防诈骗集团CEO
147 0
正值初夏,用CSS教你画夏天常玩的四彩小风车
YOLO创新改进大师
|
前端开发
css 实现旋转-风车
css 实现旋转-风车
YOLO创新改进大师
160 0
css 实现旋转-风车
二二*一一
|
13天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
36 1
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
76 2
游客fz577umxdejsg
|
3月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
80 2
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
259 65
疯狂的猿
|
24天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
76 6

热门文章

最新文章

  • 1
    纯CSS3实现宽屏二级下拉菜单
  • 2
    CSS3-实现单选框radio的小动画
  • 3
    CSS3实现时间轴效果
  • 4
    如何用纯 CSS 创作一个赛车 loader
  • 5
    05.javascript访问CSS
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3中的选择器
  • 8
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    77
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    169
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)