grid-template-columns: repeat(auto-fit, 140px);
grid-auto-rows: max-content;
grid-gap: 1rem;
justify-content: center
}
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, ’), url(‘data:image/svg+xml;utf8, ’);
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)
}
}
script.js 主要逻辑代码实现:
function A(t, n) {
t.style.animation = (t.style.animation || “”).split(“, “).filter(n ? t => t.indexOf(n) < 0 : t => -1 === t.indexOf(”__svelte”)).join(", "), n && !–F && l(() => {
if (F) return;
let t = u.cssRules.length;
for (; t–😉 u.deleteRule(t);
M = {}
})
}
function C(t, n, e, r, o, c, i, a = 0) {
const s = 16.666 / r;
let l = “{\n”;
for (let t = 0; t <= 1; t += s) {
const r = n + (e - n) * c(t);
l += 100 * t + %{${i(r,1-r)}}\n
}
const d = l + 100% {${i(e,1-e)}}\n}
,
f = __svelte_${function(t){let n=5381,e=t.length;for(;e--;)n=(n<<5)-n^t.charCodeAt(e);return n>>>0}(d)}_${a}
;
if (!M[f]) {
if (!u) {
const t = v(“style”);
document.head.appendChild(t), u = t.sheet
}
M[f] = !0, u.insertRule(@keyframes ${f} ${d}
, u.cssRules.length)
}
const p = t.style.animation || “”;
return t.style.animation = ${p?
KaTeX parse error: Expected 'EOF', got '}' at position 10: {p}, `:""}̲{f} ${r}ms linear ${o}ms 1 both`, F += 1, f
}
function R(t) {
E = t
}
function S() {
const t = E;
return (n, e) => {
const r = t.$$.callbacks[n];
if ® {
const o = P(n, e);
r.slice().forEach(n => {
n.call(t, o)
})
}
}
}
const O = [],
j = [],
N = [],
I = [],
L = Promise.resolve();
let q, z = !1;
function D() {
const t = new Set;
do {
for (; O.length;) {
const t = O.shift();
R(t), J(t.$$)
}
for (; j.length;) j.pop()();
for (let n = 0; n < N.length; n += 1) {
const e = N[n];
t.has(e) || (e(), t.add(e))
}
N.length = 0
} while (O.length);
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。