有趣的css - 旋转的设置按钮-编程知识

有趣的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);}
}