有趣的css - 旋转的设置按钮

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个会旋转的齿轮设置按钮。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① :before 和 :after 创建伪元素
②定位 position + transform 实现水平垂直居中
③ animation 动画和 transform 变换属性的使用

思路：主体标签和 :before 伪选择器绘制两个正方形叠在一起组成齿轮外观，然后 :after 创建伪元素圆点叠在齿轮中间，最后使用 :hover 伪类配合 animation 动画属性来让设置按钮旋转。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="btn45"></div>

一个 div 标签。

css 部分代码

.btn45{
  width: 48px;
  height: 48px;
  background-color: #bbbbbb;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  transform: rotate(15deg);
}
.btn45:before{
  content: '';
  width: 48px;
  height: 48px;
  background-color: #bbbbbb;
  border-radius: 6px;
  position: absolute;
  transform: rotate(45deg);
}
.btn45:after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #bbbbbb;
  border: 8px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btn45:hover{
  animation: eff45 2s linear infinite;
}
@keyframes eff45{
  100%{
    transform: rotate(375deg);
  }
}

div 标签先绘制一个正方形，设置背景色和圆角，使用 transform 变换属性旋转 15° ，这里注意要设置 div 标签定位属性 position: relative

然后使用伪类选择器 :before 再创建一个同样的正方形伪元素，使用 position 定位重叠，使用 transform 变换属性旋转 45° ，这样设置按钮外观的齿轮就绘制好了

再使用伪类选择器 :after 创建一个小一点的圆形并加上边框， position + transform 实现圆形水平垂直居中

最后使用伪类选择器 :hover 和 animation 动画属性实现当鼠标悬浮在按钮上方时，按钮会不停旋转，当鼠标从按钮上方移走时，动画停止。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>旋转的设置按钮</title>
    </head>
    <body>
        <div class="app">
            <div class="btn45"></div>
        </div>
    </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn45{
  width: 48px;
  height: 48px;
  background-color: #bbbbbb;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  transform: rotate(15deg);
}
.btn45:before{
  content: '';
  width: 48px;
  height: 48px;
  background-color: #bbbbbb;
  border-radius: 6px;
  position: absolute;
  transform: rotate(45deg);
}
.btn45:after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #bbbbbb;
  border: 8px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btn45:hover{
  animation: eff45 2s linear infinite;
}
@keyframes eff45{
  100%{
    transform: rotate(375deg);
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！