autosubmit
3 months ago
parent
758aad422f
commit
c6fc9b6f2b
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 324 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 230 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
@ -1,218 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<html>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.sprite-ai26
|
||||
{
|
||||
background:url('/images/sprite-ai.png') 0px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai25
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -40px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai24
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -80px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai23
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -120px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai22
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -160px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai21
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -200px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai20
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -240px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai19
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -280px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai18
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -320px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai17
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -360px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai16
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -400px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai15
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -440px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai14
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -480px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai13
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -520px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai12
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -560px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai11
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -600px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai10
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -640px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai9
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -680px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai8
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -720px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai7
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -760px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai6
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -800px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai5
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -840px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai4
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -880px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai3
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -920px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai2
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -960px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-ai1
|
||||
{
|
||||
background:url('/images/sprite-ai.png') -1000px -0px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
<span class="sprite-ai26"></span>
|
||||
<span class="sprite-ai25"></span>
|
||||
<span class="sprite-ai24"></span>
|
||||
<span class="sprite-ai23"></span>
|
||||
<span class="sprite-ai22"></span>
|
||||
<span class="sprite-ai21"></span>
|
||||
<span class="sprite-ai20"></span>
|
||||
<span class="sprite-ai19"></span>
|
||||
<span class="sprite-ai18"></span>
|
||||
<span class="sprite-ai17"></span>
|
||||
<span class="sprite-ai16"></span>
|
||||
<span class="sprite-ai15"></span>
|
||||
<span class="sprite-ai14"></span>
|
||||
<span class="sprite-ai13"></span>
|
||||
<span class="sprite-ai12"></span>
|
||||
<span class="sprite-ai11"></span>
|
||||
<span class="sprite-ai10"></span>
|
||||
<span class="sprite-ai9"></span>
|
||||
<span class="sprite-ai8"></span>
|
||||
<span class="sprite-ai7"></span>
|
||||
<span class="sprite-ai6"></span>
|
||||
<span class="sprite-ai5"></span>
|
||||
<span class="sprite-ai4"></span>
|
||||
<span class="sprite-ai3"></span>
|
||||
<span class="sprite-ai2"></span>
|
||||
<span class="sprite-ai1"></span>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,282 +1,466 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<html>
|
||||
<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>
|
||||
<style>
|
||||
.sprite-1
|
||||
{
|
||||
background:url('/images/sprite.png') 0px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-2
|
||||
{
|
||||
background:url('/images/sprite.png') -40px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-3
|
||||
{
|
||||
background:url('/images/sprite.png') -80px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-4
|
||||
{
|
||||
background:url('/images/sprite.png') -120px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-5
|
||||
{
|
||||
background:url('/images/sprite.png') -160px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-6
|
||||
{
|
||||
background:url('/images/sprite.png') -200px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-7
|
||||
{
|
||||
background:url('/images/sprite.png') -240px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-8
|
||||
{
|
||||
background:url('/images/sprite.png') -280px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-9
|
||||
{
|
||||
background:url('/images/sprite.png') -320px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-10
|
||||
{
|
||||
background:url('/images/sprite.png') -360px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-11
|
||||
{
|
||||
background:url('/images/sprite.png') -400px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-12
|
||||
{
|
||||
background:url('/images/sprite.png') -440px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-13
|
||||
{
|
||||
background:url('/images/sprite.png') -480px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-14
|
||||
{
|
||||
background:url('/images/sprite.png') -520px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-15
|
||||
{
|
||||
background:url('/images/sprite.png') -560px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-16
|
||||
{
|
||||
background:url('/images/sprite.png') -600px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-17
|
||||
{
|
||||
background:url('/images/sprite.png') -640px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-18
|
||||
{
|
||||
background:url('/images/sprite.png') -680px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-19
|
||||
{
|
||||
background:url('/images/sprite.png') -720px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-20
|
||||
{
|
||||
background:url('/images/sprite.png') -760px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-21
|
||||
{
|
||||
background:url('/images/sprite.png') -800px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-22
|
||||
{
|
||||
background:url('/images/sprite.png') -840px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-23
|
||||
{
|
||||
background:url('/images/sprite.png') -880px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-24
|
||||
{
|
||||
background:url('/images/sprite.png') -920px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-25
|
||||
{
|
||||
background:url('/images/sprite.png') -960px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-26
|
||||
{
|
||||
background:url('/images/sprite.png') -1000px -109px;
|
||||
width:40px;height:40px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-27
|
||||
{
|
||||
background:url('/images/sprite.png') -1040px -59px;
|
||||
width:90px;height:90px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-28
|
||||
{
|
||||
background:url('/images/sprite.png') -1130px -117px;
|
||||
width:35px;height:32px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-29
|
||||
{
|
||||
background:url('/images/sprite.png') -1165px -119px;
|
||||
width:52px;height:30px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-30
|
||||
{
|
||||
background:url('/images/sprite.png') -1217px -120px;
|
||||
width:45px;height:29px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-31
|
||||
{
|
||||
background:url('/images/sprite.png') -1262px -123px;
|
||||
width:33px;height:26px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-32
|
||||
{
|
||||
background:url('/images/sprite.png') -1295px -133px;
|
||||
width:16px;height:16px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-33
|
||||
{
|
||||
background:url('/images/sprite.png') -1311px -97px;
|
||||
width:78px;height:52px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-34
|
||||
{
|
||||
background:url('/images/sprite.png') -1389px -114px;
|
||||
width:163px;height:35px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-35
|
||||
{
|
||||
background:url('/images/sprite.png') -1552px -107px;
|
||||
width:104px;height:42px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-36
|
||||
{
|
||||
background:url('/images/sprite.png') -1656px -107px;
|
||||
width:104px;height:42px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-37
|
||||
{
|
||||
background:url('/images/sprite.png') -1760px -107px;
|
||||
width:104px;height:42px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-38
|
||||
{
|
||||
background:url('/images/sprite.png') -1864px -107px;
|
||||
width:104px;height:42px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-39
|
||||
{
|
||||
background:url('/images/sprite.png') -1968px -117px;
|
||||
width:104px;height:32px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-40
|
||||
{
|
||||
background:url('/images/sprite.png') -2072px -117px;
|
||||
width:104px;height:32px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-41
|
||||
{
|
||||
background:url('/images/sprite.png') -2176px -117px;
|
||||
width:104px;height:32px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-42
|
||||
{
|
||||
background:url('/images/sprite.png') -2280px -92px;
|
||||
width:212px;height:57px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-43
|
||||
{
|
||||
background:url('/images/sprite.png') -2492px -92px;
|
||||
width:164px;height:57px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-44
|
||||
{
|
||||
background:url('/images/sprite.png') -2656px -92px;
|
||||
width:176px;height:57px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-45
|
||||
{
|
||||
background:url('/images/sprite.png') -2832px -0px;
|
||||
width:230px;height:149px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-46
|
||||
{
|
||||
background:url('/images/sprite.png') -3062px -113px;
|
||||
width:112px;height:36px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-47
|
||||
{
|
||||
background:url('/images/sprite.png') -3174px -131px;
|
||||
width:14px;height:18px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-48
|
||||
{
|
||||
background:url('/images/sprite.png') -3188px -131px;
|
||||
width:14px;height:18px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-49
|
||||
{
|
||||
background:url('/images/sprite.png') -3202px -131px;
|
||||
width:14px;height:18px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-50
|
||||
{
|
||||
background:url('/images/sprite.png') -3216px -105px;
|
||||
width:104px;height:44px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-51
|
||||
{
|
||||
background:url('/images/sprite.png') -3320px -107px;
|
||||
width:38px;height:42px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-52
|
||||
{
|
||||
background:url('/images/sprite.png') -3358px -115px;
|
||||
width:214px;height:34px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-53
|
||||
{
|
||||
background:url('/images/sprite.png') -3572px -105px;
|
||||
width:205px;height:44px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-54
|
||||
{
|
||||
background:url('/images/sprite.png') -3777px -111px;
|
||||
width:235px;height:38px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-55
|
||||
{
|
||||
background:url('/images/sprite.png') -4012px -121px;
|
||||
width:28px;height:28px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-56
|
||||
{
|
||||
background:url('/images/sprite.png') -4040px -121px;
|
||||
width:28px;height:28px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.sprite-57
|
||||
{
|
||||
background:url('/images/sprite.png') -4068px -11px;
|
||||
width:500px;height:138px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
<span class="sprite-1"></span>
|
||||
<span class="sprite-2"></span>
|
||||
<span class="sprite-3"></span>
|
||||
<span class="sprite-4"></span>
|
||||
<span class="sprite-5"></span>
|
||||
<span class="sprite-6"></span>
|
||||
<span class="sprite-7"></span>
|
||||
<span class="sprite-8"></span>
|
||||
<span class="sprite-9"></span>
|
||||
<span class="sprite-10"></span>
|
||||
<span class="sprite-11"></span>
|
||||
<span class="sprite-12"></span>
|
||||
<span class="sprite-13"></span>
|
||||
<span class="sprite-14"></span>
|
||||
<span class="sprite-15"></span>
|
||||
<span class="sprite-16"></span>
|
||||
<span class="sprite-17"></span>
|
||||
<span class="sprite-18"></span>
|
||||
<span class="sprite-19"></span>
|
||||
<span class="sprite-20"></span>
|
||||
<span class="sprite-21"></span>
|
||||
<span class="sprite-22"></span>
|
||||
<span class="sprite-23"></span>
|
||||
<span class="sprite-24"></span>
|
||||
<span class="sprite-25"></span>
|
||||
<span class="sprite-26"></span>
|
||||
<span class="sprite-27"></span>
|
||||
<span class="sprite-28"></span>
|
||||
<span class="sprite-29"></span>
|
||||
<span class="sprite-30"></span>
|
||||
<span class="sprite-31"></span>
|
||||
<span class="sprite-32"></span>
|
||||
<span class="sprite-33"></span>
|
||||
<span class="sprite-34"></span>
|
||||
<span class="sprite-35"></span>
|
||||
<span class="sprite-36"></span>
|
||||
<span class="sprite-37"></span>
|
||||
<span class="sprite-38"></span>
|
||||
<span class="sprite-39"></span>
|
||||
<span class="sprite-40"></span>
|
||||
<span class="sprite-41"></span>
|
||||
<span class="sprite-42"></span>
|
||||
<span class="sprite-43"></span>
|
||||
<span class="sprite-44"></span>
|
||||
<span class="sprite-45"></span>
|
||||
<span class="sprite-46"></span>
|
||||
<span class="sprite-47"></span>
|
||||
<span class="sprite-48"></span>
|
||||
<span class="sprite-49"></span>
|
||||
<span class="sprite-50"></span>
|
||||
<span class="sprite-51"></span>
|
||||
<span class="sprite-52"></span>
|
||||
<span class="sprite-53"></span>
|
||||
<span class="sprite-54"></span>
|
||||
<span class="sprite-55"></span>
|
||||
<span class="sprite-56"></span>
|
||||
<span class="sprite-57"></span>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</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