🍅 作者主页：Java李杨勇 

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示： 文末获取源码 

代码目录：

主要代码实现：

CSS样式：

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap");
* {box-sizing: border-box;padding: 0;margin: 0;
}body {min-height: 100vh;color: hsl(340, 5%, 20%);background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.1" width="100" height="100" fill="hsl(340, 10%, 30%)"><path d="M21.5 18.938a8 8 0 0113.856-8q6 10.392-3.856 25.32-17.856 1.072-23.856-9.32a8 8 0 0113.856-8M67 11.144L87.124 18 83 38.856 62.876 32zM77.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 9 9 0 01-15.588 9 9 9 0 0115.588-9 9 9 0 01-9-15.588 9 9 0 019 15.588 9 9 0 0115.588-9 9 9 0 01-15.588 9M27.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 8 8 0 01-13.856 8q-5-8.66 3.856-25.32 18.856.66 23.856 9.32a8 8 0 01-13.856 8"/></svg>'), hsl(340, 10%, 5%);font-family: "Noto Sans JP", sans-serif;font-weight: 400;padding: 100px 0 0 0;
}main.svelte-185gx00 {margin: 1rem auto;width: 90vw;max-width: 700px;display: grid;grid-template-columns: repeat(auto-fit, 140px);grid-auto-rows: max-content;grid-gap: 1rem;justify-content: center
}div.svelte-1nxkdr7 {position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 5;background: hsla(0, 0%, 10%, 0.5);backdrop-filter: blur(1px)
}section.svelte-1nxkdr7 {padding: 3rem 3.5rem;background: url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(-1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), hsl(0, 0%, 100%);background-size: 30%;background-position: 0% 100%, 100% 100%;background-repeat: no-repeat;text-align: center;border: 0.75rem solid hsl(340, 70%, 50%);border-radius: 15px;box-shadow: 0 2px 10px -5px hsla(0, 0%, 0%, 0.2)
}h1.svelte-1nxkdr7 {text-transform: uppercase;margin-bottom: 1.25rem;font-weight: 800
}button.svelte-1nxkdr7 {font-weight: 800;padding: 1.25rem 1.5rem;border: none;color: inherit;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -4 a 7 7 0 0 1 14 0 q 0 12 -14 18 q -14 -7 -14 -18 a 7 7 0 0 1 14 0" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -15 l 11 15 -11 15 -11 -15 z" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 q 0 -10 14 -16 q 14 6 14 16 a 7 7 0 0 1 -14 0"/></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 7 7 0 0 1 14 0 7 7 0 0 1 0 -14 7 7 0 0 1 0 14 7 7 0 0 1 14 0 7 7 0 0 1 -14 0"/></g></svg>');background-size: 2rem;background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;background-repeat: no-repeat;font-family: inherit;font-size: 1.1rem;text-transform: uppercase;letter-spacing: 0.05rem
}article.svelte-1m66100 {position: relative;padding: 2rem;border-radius: 20px;width: 140px;height: 165px;transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);transform: perspective(800px) rotateY(0deg);transform-style: preserve-3d
}.flip.svelte-1m66100 {transform: perspective(800px) rotateY(180deg)
}.paired.svelte-1m66100 {animation: svelte-1m66100-pair 0.25s 1s ease-in-out 2 alternate
}@keyframes svelte-1m66100-pair {25% {transform: rotateZ(-5deg)}75% {transform: rotateZ(5deg)}
}.face.svelte-1m66100,
button.svelte-1m66100 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: inherit
}button.svelte-1m66100 {background: none;border: none
}.face.svelte-1m66100 {backface-visibility: hidden;border: 0.75rem solid hsl(340, 70%, 50%);background: hsl(0, 0%, 100%);pointer-events: none
}.back.svelte-1m66100 {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><path id="a" d="M0-50L50 0 0 50-50 0z" stroke="none"/><g id="b"><use href="%23a" fill="hsl(340, 70%, 50%)"/><use href="%23a" transform="scale(.8)" fill="hsl(345, 90%, 65%)"/><use href="%23a" transform="scale(.6)" fill="hsl(0, 90%, 60%)"/><use href="%23a" transform="scale(.4)" fill="hsl(30, 80%, 70%)"/><use href="%23a" transform="scale(.2)" fill="hsl(50, 95%, 80%)"/></g></defs><use href="%23b"/><use href="%23b" x="100"/><use href="%23b" x="100" y="100"/><use href="%23b" y="100"/><use href="%23b" x="50" y="50"/></svg>'), hsl(0, 0%, 100%);background-size: 25%;transform: rotateY(180deg)
}.front.svelte-1m66100 {background: url('data:image/svg+xml;utf8,<svg opacity="0.1" xmlns="http://www.w3.org/2000/svg" width="480" height="440" viewBox="0 0 240 220" stroke="hsl(340, 70%, 50%)" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" fill="none"><g transform="translate(120 110) rotate(-35)"><path id="a" d="M50-22.5h-60 25a45 45 0 010 90h-75a45 45 0 010-90"/><use transform="scale(-1)" href="%23a"/></g></svg>'), hsl(0, 0%, 100%);background-repeat: no-repeat;background-size: 100%;background-position: 50% 50%;display: flex;justify-content: center;align-items: center
}h1.svelte-1m66100 {font-size: 2.5rem;font-weight: 900
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Svelte Concentration</title><link rel="stylesheet" href="css/style.css"></head><body><script src="js/script.js"></script></body></html>

上面的图片文件和js文件需要引入 

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~！

打卡 文章 更新 44  /  100天

精彩推荐更新中：

HTML5大作业实战100套