纯 CSS 的关闭按钮
知识点: transform 的 translateY rotate 属性
html:
- <div id="box">
- <span class="close">Close Me</span>
- </div>
思路:
通过伪类画出两条直线 构成关闭图案的两条线
利用 transform 中的 rotate 属性将两条直线旋转构成叉的图案
首先画一个 box
CSS:
- .close {
- font-size: 0; /* 隐藏文字元素 */
- width: 30px;
- height: 30px;
- background: #50935D;
- }
利用伪类画两条横杠
- .close::before, .close::after {
- content: '';
- width: 20px;
- height: 2px;
- background: #FFF;
- display: block;
- }
之前的 box 缺了点 其实这就是两条横杠 添加一点代码把他移到中间的位置, 我用了伸缩盒子的特性来达到这个效果
- /* 添加的代码 */
- .close {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
我们为其中一个伪类更换一下颜色, 区分开来, 更能区分一下
- .close::after {
- background: blue;
- }
现在利用 transform 的 rotate 的属性 对其中一条线进行旋转
- .close::before {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
重复利用 transform 的 rotate 的属性 反方向旋转另外一条线
- .close::after {
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
但是可以看出没用对齐 蓝色的线比白色的线要低点
需要利用 transform 的另外一个属性 translate 属性将蓝色的线在 Y 轴上往上移动 2px
原因是因为: before 和: after 一个上一个下 之间在 Y 轴上相差 2px 所以需要此操作修复
- .close::after {
- -webkit-transform: translateY(-2px) rotate(-45deg);
- transform: translateY(-2px) rotate(-45deg);
- }
现在看就已经平齐了 现在把蓝色改为白色 就 OK 啦!
当然还可以添加一些动画的话
- .close {
- border-radius: 50%; /* 改成一个圆 */
- transform: rotate(0deg);
- transition: all 1s linear;
- }
- .close:hover { /* 鼠标移入让图案旋转一周 */
- transform: rotate(360deg)
- }
全部代码示例:
CSS:
- .close {
- font-size: 0;
- width: 30px;
- height: 30px;
- background: #50935D;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 50%;
- transform: rotate(0deg);
- transition: all 1s linear;
- }
- .close::before, .close::after {
- content: '';
- width: 20px;
- height: 2px;
- background: #FFF;
- display: block;
- }
- .close::before {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .close::after {
- -webkit-transform: translateY(-2px) rotate(-45deg);
- transform: translateY(-2px) rotate(-45deg);
- }
- .close:hover {
- transform: rotate(360deg)
- }
来源: http://www.qdfuns.com/article/50158/a3bf464a2cda10e4c62f397053857a26.html