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

CSS 绘制小风车

2023-11-02 38

版权

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

简介： 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;
}