You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
5.4 KiB
282 lines
5.4 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Sprite Preview</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(0, 0, 0, .75);
|
|
color: #fff;
|
|
padding: 10px 16px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: all .25s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.item {
|
|
width: 160px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
|
|
text-align: center;
|
|
}
|
|
|
|
.icon {
|
|
margin: 0 auto 8px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 12px;
|
|
color: #666;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ===== 你的雪碧图 CSS ===== */
|
|
|
|
[class^="sprite_edu"] {
|
|
background: url('./images/icons.png') no-repeat top left;
|
|
display: inline-flex;
|
|
}
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 2),
|
|
(min-resolution: 192dpi) {
|
|
[class^="sprite_edu"] {
|
|
background: url('./images/icons-retina.png') no-repeat top left;
|
|
background-size: 479px 461px;
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
/* === 自动生成的 class === */
|
|
.sprite_edu_57 {
|
|
background-position: 0 0;
|
|
width: 270px;
|
|
height: 89px
|
|
}
|
|
|
|
.sprite_edu_45 {
|
|
background-position: 0 -90px;
|
|
width: 135px;
|
|
height: 95px
|
|
}
|
|
|
|
.sprite_edu_42 {
|
|
background-position: -136px -90px;
|
|
width: 126px;
|
|
height: 49px
|
|
}
|
|
|
|
.sprite_edu_54 {
|
|
background-position: 0 -186px;
|
|
width: 138px;
|
|
height: 39px
|
|
}
|
|
|
|
.sprite_edu_44 {
|
|
background-position: -271px 0;
|
|
width: 108px;
|
|
height: 49px
|
|
}
|
|
|
|
.sprite_edu_53 {
|
|
background-position: -136px -140px;
|
|
width: 123px;
|
|
height: 42px
|
|
}
|
|
|
|
.sprite_edu_43 {
|
|
background-position: -271px -50px;
|
|
width: 102px;
|
|
height: 49px
|
|
}
|
|
|
|
.sprite_edu_52 {
|
|
background-position: -139px -186px;
|
|
width: 127px;
|
|
height: 37px
|
|
}
|
|
|
|
.sprite_edu_26 {
|
|
background-position: -271px -100px;
|
|
width: 65px;
|
|
height: 65px
|
|
}
|
|
|
|
.sprite_edu_27 {
|
|
background-position: 0 -226px;
|
|
width: 65px;
|
|
height: 65px
|
|
}
|
|
|
|
.sprite_edu_34 {
|
|
background-position: -271px -166px;
|
|
width: 102px;
|
|
height: 38px
|
|
}
|
|
|
|
.sprite_edu_50 {
|
|
background-position: -66px -226px;
|
|
width: 72px;
|
|
height: 42px
|
|
}
|
|
|
|
.sprite_edu_35 {
|
|
background-position: -139px -226px;
|
|
width: 72px;
|
|
height: 41px
|
|
}
|
|
|
|
.sprite_edu_36 {
|
|
background-position: -212px -226px;
|
|
width: 72px;
|
|
height: 41px
|
|
}
|
|
|
|
.sprite_edu_37 {
|
|
background-position: -285px -226px;
|
|
width: 72px;
|
|
height: 41px
|
|
}
|
|
|
|
.sprite_edu_38 {
|
|
background-position: 0 -292px;
|
|
width: 72px;
|
|
height: 41px
|
|
}
|
|
|
|
.sprite_edu_46 {
|
|
background-position: -73px -292px;
|
|
width: 76px;
|
|
height: 38px
|
|
}
|
|
|
|
.sprite_edu_33 {
|
|
background-position: -380px 0;
|
|
width: 59px;
|
|
height: 46px
|
|
}
|
|
|
|
.sprite_edu_39 {
|
|
background-position: -150px -292px;
|
|
width: 72px;
|
|
height: 36px
|
|
}
|
|
|
|
.sprite_edu_40 {
|
|
background-position: -223px -292px;
|
|
width: 72px;
|
|
height: 36px
|
|
}
|
|
|
|
.sprite_edu_41 {
|
|
background-position: -296px -292px;
|
|
width: 72px;
|
|
height: 36px
|
|
}
|
|
|
|
.sprite_edu_8 {
|
|
background-position: -380px -47px;
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
.sprite_edu_9 {
|
|
background-position: -380px -96px;
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
.sprite_edu_10 {
|
|
background-position: -380px -145px;
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
.sprite_edu_11 {
|
|
background-position: -380px -194px;
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
.sprite_edu_12 {
|
|
background-position: -380px -243px;
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
/* 后面的你可以继续补，全量复制即可 */
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>Sprite 雪碧图预览</h2>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<div class="preview" id="preview"></div>
|
|
|
|
<script>
|
|
const classes = [
|
|
57, 45, 42, 54, 44, 53, 43, 52, 26, 27, 34, 50, 35, 36, 37, 38, 46, 33,
|
|
39, 40, 41, 8, 9, 10, 11, 12
|
|
];
|
|
|
|
const container = document.getElementById('preview');
|
|
const toast = document.getElementById('toast');
|
|
let toastTimer = null;
|
|
|
|
function showToast(text) {
|
|
toast.textContent = text;
|
|
toast.classList.add('show');
|
|
clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
}, 1500);
|
|
}
|
|
|
|
function copyText(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
showToast(`已复制 ${text}`);
|
|
});
|
|
}
|
|
|
|
classes.forEach(n => {
|
|
const className = `sprite_edu_${n}`;
|
|
const item = document.createElement('div');
|
|
item.className = 'item';
|
|
item.innerHTML = `
|
|
<i class="${className}"></i>
|
|
<div class="name">${className}</div>
|
|
`;
|
|
item.onclick = () => copyText(className);
|
|
container.appendChild(item);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |