CSS 绘制小风车

遐想
3,143 阅读4分钟

v2-e0b789ca605e1ba511ddb7911b4be3de_720w.webp 我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

烈日炎炎，快来降温吧！

由于电费太贵，本掘金提供云风扇服务

前言

记得我十岁的时候，妈妈给我买了一台人生中第一台电风扇，十岁就有一台自己的电风扇，你敢想吗，它比真的很漂亮。我很喜欢这个小风车 啊~，一直小心地保存着。每当夏天来临时，只要按下开关，小风车就会给我送来一阵凉丝丝的清风。这台小风车是塑料做的。圆圆的风罩里有三片灰白的风叶，中间有个黑色的转轴，风罩是白色的。风叶一转起来，可真像五彩的棒棒糖，好看极了。小风车的机头和机身是全白的。机身上面画着一朵美丽的龙，周围被保护罩围着。机头里面有一个小型电动机，通电以后，小风车就会发出“啊啊”的声音，风叶也跟着转了起来。小电扇的底座是粉色的。底座上还有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
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;
}

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

v2-e0b789ca605e1ba511ddb7911b4be3de_720w.webp

v2-e0b789ca605e1ba511ddb7911b4be3de_720w.webp

v2-e0b789ca605e1ba511ddb7911b4be3de_720w.webp

v2-e0b789ca605e1ba511ddb7911b4be3de_720w.webp

avatar
文章
阅读
粉丝