CSS 绘制小风车-阿里云开发者社区

CSS 绘制小风车

2023-11-02 50

版权

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

简介： CSS 绘制小风车

前言

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

实现效果

实现过程

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 绘制小风车

前言

实现效果

实现过程

html

CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS 绘制小风车

前言

实现效果

实现过程

html

CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景