我知道你想做什么，但不知道。图像替换是 10-15 年前的一种技术。如果要将复选标记设置为取消符号的动画，最好的方法是变形 SVG 对象。有一个完整的库可以为您做到这一点：
http://www.transformicons.com/
他们甚至有一个检查 > 取消标志对象。只有一个对象的代码看起来像这样......
HTML：
<button type="button" class="tcon tcon-remove tcon-remove--check" aria-label="remove item">
<span class="tcon-visuallyhidden">remove item</span>
</button>
CSS：
.tcon {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
transition: 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 40px;
background: transparent;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent; }
.tcon > * {
display: block; }
.tcon:hover,
.tcon:focus {
outline: none; }
.tcon::-moz-focus-inner {
border: 0; }
.tcon-remove {
height: 40px;
position: relative;
-webkit-transform: scale(0.75);
transform: scale(0.75);
width: 40px; }
.tcon-remove::before,
.tcon-remove::after {
content: "";
display: block;
border-radius: 2px;
width: 85%;
height: 25%;
position: absolute;
top: 37%;
left: 8%;
transition: 0.3s;
background: black; }
.tcon-remove::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.tcon-remove::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.tcon-remove--check.tcon-transform::before {
-webkit-transform: rotate(-135deg) translate(5%, -10%);
transform: rotate(-135deg) translate(5%, -10%);
top: 50%;
width: 55%; }
.tcon-remove--check.tcon-transform::after {
-webkit-transform: rotate(-45deg) translate(20%, 10%);
transform: rotate(-45deg) translate(20%, 10%);
top: 50%;
width: 85%; }
.tcon-visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.tcon-visuallyhidden:active,
.tcon-visuallyhidden:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
JS：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD module
define(factory);
} else if (typeof exports === 'object') {
// CommonJS-like environment (i.e. Node)
module.exports = factory();
} else {
// Browser global
root.transformicons = factory();
}
}(this || window, function () {
// ####################
// MODULE TRANSFORMICON
// ####################
'use strict';
var
tcon = {}, // static class
_transformClass = 'tcon-transform',
// const
DEFAULT_EVENTS = {
transform : ['click'],
revert : ['click']
};
// ##############
// private methods
// ##############
/**
* Normalize a selector string, a single DOM element or an array of elements into an array of DOM elements.
* @private
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements
* @returns {array} Array of DOM elements
*/
var getElementList = function (elements) {
if (typeof elements === 'string') {
return Array.prototype.slice.call(document.querySelectorAll(elements));
} else if (typeof elements === 'undefined' || elements instanceof Array) {
return elements;
} else {
return [elements];
}
};
/**
* Normalize a string with eventnames separated by spaces or an array of eventnames into an array of eventnames.
* @private
*
* @param {(string|array)} elements - String with eventnames separated by spaces or array of eventnames
* @returns {array} Array of eventnames
*/
var getEventList = function (events) {
if (typeof events === 'string') {
return events.toLowerCase().split(' ');
} else {
return events;
}
};
/**
* Attach or remove transformicon events to one or more elements.
* @private
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
* @param {object} [events] - An Object containing one or more special event definitions
* @param {boolean} [remove=false] - Defines wether the listeners should be added (default) or removed.
*/
var setListeners = function (elements, events, remove) {
var
method = (remove ? 'remove' : 'add') + 'EventListener',
elementList = getElementList(elements),
currentElement = elementList.length,
eventLists = {};
// get events or use defaults
for (var prop in DEFAULT_EVENTS) {
eventLists[prop] = (events && events[prop]) ? getEventList(events[prop]) : DEFAULT_EVENTS[prop];
}
// add or remove all events for all occasions to all elements
while(currentElement--) {
for (var occasion in eventLists) {
var currentEvent = eventLists[occasion].length;
while(currentEvent--) {
elementList[currentElement][method](eventLists[occasion][currentEvent], handleEvent);
}
}
}
};
/**
* Event handler for transform events.
* @private
*
* @param {object} event - event object
*/
var handleEvent = function (event) {
tcon.toggle(event.currentTarget);
};
// ##############
// public methods
// ##############
/**
* Add transformicon behavior to one or more elements.
* @public
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
* @param {object} [events] - An Object containing one or more special event definitions
* @param {(string|array)} [events.transform] - One or more events that trigger the transform. Can be an Array or string with events seperated by space.
* @param {(string|array)} [events.revert] - One or more events that trigger the reversion. Can be an Array or string with events seperated by space.
* @returns {transformicon} transformicon instance for chaining
*/
tcon.add = function (elements, events) {
setListeners(elements, events);
return tcon;
};
/**
* Remove transformicon behavior from one or more elements.
* @public
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
* @param {object} [events] - An Object containing one or more special event definitions
* @param {(string|array)} [events.transform] - One or more events that trigger the transform. Can be an Array or string with events seperated by space.
* @param {(string|array)} [events.revert] - One or more events that trigger the reversion. Can be an Array or string with events seperated by space.
* @returns {transformicon} transformicon instance for chaining
*/
tcon.remove = function (elements, events) {
setListeners(elements, events, true);
return tcon;
};
/**
* Put one or more elements in the transformed state.
* @public
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be transformed
* @returns {transformicon} transformicon instance for chaining
*/
tcon.transform = function (elements) {
getElementList(elements).forEach(function(element) {
element.classList.add(_transformClass);
});
return tcon;
};
/**
* Revert one or more elements to the original state.
* @public
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be reverted
* @returns {transformicon} transformicon instance for chaining
*/
tcon.revert = function (elements) {
getElementList(elements).forEach(function(element) {
element.classList.remove(_transformClass);
});
return tcon;
};
/**
* Toggles one or more elements between transformed and original state.
* @public
*
* @param {(string|element|array)} elements - Selector, DOM element or Array of DOM elements to be toggled
* @returns {transformicon} transformicon instance for chaining
*/
tcon.toggle = function (elements) {
getElementList(elements).forEach(function(element) {
tcon[element.classList.contains(_transformClass) ? 'revert' : 'transform'](element);
});
return tcon;
};
return tcon;
}));