css 实现 'X' 号的显示(close关闭 icon), 并支持动画效果

最近项目上要实现一个小 'x' 的关闭样式, 今天记录一下处理过程

先看效果

HTML DOM 元素说明

要渲染内容必须有 dom 节点, 这里我们使用 span 作为容器, 然后所有的处理都基于它进行处理

<span class="close-x">span>

第一步, 设置 close-x 的样式

@closeXSize: 20px; // 大小/尺寸
@closeXLine: 2px; // 线条宽度
.close-x {
position: relative;
display: inline-block;
width: @closeXSize;
height: @closeXSize;
cursor: pointer;

}

• 
  
• 通过使用 closeXSize closeXLine, 方便对尺寸进行调整
  
  渲染出来大概是这样的
  
  

第二步, 通过伪元素 before after 画两条线

.close-x {
// ...

&::before, &::after {
position: absolute;
left: 50%;
width: @closeXLine;
height: 100%;
margin-left: (@closeXLine / -2);
content: '';
background: #000;

    }

}

• 
  
• margin-left 的设置是为了处理'线'的自身宽度
  
  渲染出来大概是这样的
  
  

第三步, 分别设置旋转角度

.close-x {
// ...

&::before {
transform: rotate(-45deg);

    }

&::after {
transform: rotate(45deg);

    }

}

渲染出来大概是这样的, 基本上就完成了

继续优化, 锦上添花

• 
  
• 先来定义一个动画, 动画的意思是这样的:
  
  • 
    
  • 当为 0% 时旋转角为 0 度,
    
  • 当为 100% 时旋转角为 360 度
    
  
  
  

@keyframes rotating {
0% {
transform: rotate(0deg);

    }

100% {
transform: rotate(360deg);

    }

}

持续旋转

.rotate-infinite {
animation: rotating .3s infinite linear;

}

// 使用方式 增加类 rotate-infinite
// 

加载时旋转一次

.rotate-one {
animation: rotating .3s linear;

}

// 使用方式 增加类 rotate-one
// 

hover 时旋转一次

.rotate-hover:hover {
.rotate-one();

}

// 使用方式 增加类 rotate-hover
// 

选中时旋转

.rotate-active:active {
.rotate-infinite();

}

// 使用方式 增加类 rotate-active
// 

纯JS实现

function addCloseX(content) {
const closeXSize = 20;
const closeXLine = 2;

const closeXWrap = document.createElement('div');

    closeXWrap.style.cssText = `

        position: relative;

        display: inline-block;

        width: ${closeXSize}px;

        height: ${closeXSize}px;

        cursor: pointer;

    `;

const baseStyle = `

        display: block;

        height: 100%;

        width: ${closeXLine}px;

        margin: auto;

        background: #000;

    `;
const xLineOne = document.createElement('i');

    xLineOne.style.cssText = baseStyle + `

        transform: rotate(45deg);

    `;
const xLineTwo = document.createElement('i');

    xLineTwo.style.cssText = baseStyle + `

        margin-top: -100%;

        transform: rotate(-45deg);

    `;

    closeXWrap.appendChild(xLineOne);

    closeXWrap.appendChild(xLineTwo);


    content.appendChild(closeXWrap);

}

addCloseX(document.getElementById('close'))

需要提供一下注入的位置, 以上示例需要我们提供这样的 dmo 节点:

<div id="close">div>

• 
  
• 这种方式没有使用样式表, 所有的样式都使用了行内样式的方式实现的
  
• 因为只用到了行内样式, 所以没办法使用伪元素, 故引入了两个 i 标签代替
  

结束

相关文档

CSS 实现圆(环)形进度条