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
// <span class="close-x rotate-infinite"></span>

加载时旋转一次

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








// 使用方式 增加类 rotate-one
// <span class="close-x rotate-one"></span>

hover 时旋转一次

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








// 使用方式 增加类 rotate-hover
// <span class="close-x rotate-hover"></span>

选中时旋转

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








// 使用方式 增加类 rotate-active
// <span class="close-x rotate-active"></span>

纯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 实现圆(环)形进度条