CSS 实现 Google 三八节 Logo基础页面结构点击旋转需要用到 JS 吗？当然不需要，CSS 就可以解决这

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

基础页面结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #cont {
      width: 482px;
      height: 250px;
      background: url("https://s1.ax1x.com/2022/07/25/jxmypd.png");
      background-position: -20px -10px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -125px 0 0 -241px;
    }
  </style>
</head>

<body>
  <div id="cont">
  </div>
</body>

</html>

图片.png

<div id="cont">
  <div id="circle"></div>
</div>

#circle {
  width: 79px;
  height: 79px;
  position: absolute;
  top: 60px;
  left: 184px;
  background: url("https://s1.ax1x.com/2022/07/25/jxmypd.png");
  background-position: -1495px -190px;
}

图片.png

<div id="cont">
  <label id="btn" for="play"></label>
  <div id="circle"></div>
</div>

#btn {
  width: 60px;
  height: 78px;
  position: absolute;
  left: 204px;
  top: 64px;
  background: url("https://s1.ax1x.com/2022/07/25/jxmypd.png");
  background-position: -1495px -110px;
}

图片.png

点击旋转

需要用到 JS 吗？当然不需要，CSS 就可以解决这一切。

<input type="checkbox" id="play" />
<div id="cont">
  <label id="btn" for="play"></label>
  <div id="circle"></div>
</div>

#play:checked~#cont #circle {
  animation: roll 1.8s linear infinite;
}

@keyframes roll {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

图片.png

是不是动起来了呀。

但问题是二者同时存在，那这个是不是还是需要用到 JS 来控制显示与隐藏。不不不，opacity 就可以解决这个问题。

#circle {
  opacity: 0;
  // ...
}

#play:checked~#cont #circle {
  opacity: 1;
  // ....
}

#play:checked~#cont #btn {
  display: none;
}

相当不错👍👍👍👍👍

点击按钮，动起来

#btn:hover {
  cursor: pointer;
  background-position: -1495px -30px;
}

#btn {
  // ...
  z-index: 10;
}

全部动起来

#play:checked~#cont {
  animation: run 1.2s steps(1, end) infinite;
}

@keyframes run {
  0% {
    background-position: -20px -10px;
  }

  33% {
    background-position: -521px -10px;
  }

  66% {
    background-position: -1012px -10px;
  }

  100% {
    background-position: -20px -10px;
  }
}

这里用到了一个比较陌生的函数 steps() 。允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。

两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态。

Jul-25-2022 20-35-31.gif