autosubmit
3 months ago
parent
106d618d8f
commit
758aad422f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 324 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 40 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,218 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
|
||||
[class^="sprite_ai"] {
|
||||
background: url('./images/sprite-ai.png') no-repeat top left;
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.sprite_ai_26 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.sprite_ai_25 {
|
||||
background-position: -41px 0;
|
||||
}
|
||||
|
||||
.sprite_ai_24 {
|
||||
background-position: 0 -41px;
|
||||
}
|
||||
|
||||
.sprite_ai_23 {
|
||||
background-position: -41px -41px;
|
||||
}
|
||||
|
||||
.sprite_ai_22 {
|
||||
background-position: -82px 0;
|
||||
}
|
||||
|
||||
.sprite_ai_21 {
|
||||
background-position: -82px -41px;
|
||||
}
|
||||
|
||||
.sprite_ai_20 {
|
||||
background-position: 0 -82px;
|
||||
}
|
||||
|
||||
.sprite_ai_19 {
|
||||
background-position: -41px -82px;
|
||||
}
|
||||
|
||||
.sprite_ai_18 {
|
||||
background-position: -82px -82px;
|
||||
}
|
||||
|
||||
.sprite_ai_17 {
|
||||
background-position: -123px 0;
|
||||
}
|
||||
|
||||
.sprite_ai_16 {
|
||||
background-position: -123px -41px;
|
||||
}
|
||||
|
||||
.sprite_ai_15 {
|
||||
background-position: -123px -82px;
|
||||
}
|
||||
|
||||
.sprite_ai_14 {
|
||||
background-position: 0 -123px;
|
||||
}
|
||||
|
||||
.sprite_ai_13 {
|
||||
background-position: -41px -123px;
|
||||
}
|
||||
|
||||
.sprite_ai_12 {
|
||||
background-position: -82px -123px;
|
||||
}
|
||||
|
||||
.sprite_ai_11 {
|
||||
background-position: -123px -123px;
|
||||
}
|
||||
|
||||
.sprite_ai_10 {
|
||||
background-position: -164px 0;
|
||||
}
|
||||
|
||||
.sprite_ai_9 {
|
||||
background-position: -164px -41px;
|
||||
}
|
||||
|
||||
.sprite_ai_8 {
|
||||
background-position: -164px -82px;
|
||||
}
|
||||
|
||||
.sprite_ai_7 {
|
||||
background-position: -164px -123px;
|
||||
}
|
||||
|
||||
.sprite_ai_6 {
|
||||
background-position: 0 -164px;
|
||||
}
|
||||
|
||||
.sprite_ai_5 {
|
||||
background-position: -41px -164px;
|
||||
}
|
||||
|
||||
.sprite_ai_4 {
|
||||
background-position: -82px -164px;
|
||||
}
|
||||
|
||||
.sprite_ai_3 {
|
||||
background-position: -123px -164px;
|
||||
}
|
||||
|
||||
.sprite_ai_2 {
|
||||
background-position: -164px -164px;
|
||||
}
|
||||
|
||||
.sprite_ai_1 {
|
||||
background-position: -205px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Sprite 雪碧图预览</h2>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<div class="preview" id="preview"></div>
|
||||
|
||||
<script>
|
||||
const classes = Array.from({ length: 26 }, (_, i) => i + 1);;
|
||||
|
||||
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_ai_${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>
|
||||
@ -0,0 +1,282 @@
|
||||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue