T恤尺寸

下载代码

html

css

分享到微信朋友圈

html

css

*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #405a6d;
}
.container {
  contain: layout size;
  --css-contain: layout size;
  resize: both;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  min-width: 200px;
  max-height: 500px;
  max-width: 500px;
}
.container:active .arrow {
  display: none;
}
.arrow {
  height: 30px;
  width: 20px;
  background: #fff;
  position: absolute;
  bottom: 15px;
  right: 0;
  transform-origin: 50% 100%;
  transform: rotate(-15deg);
  -webkit-clip-path: polygon(50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60%);
  clip-path: polygon(50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60%);
  animation: bounce 0.5s infinite linear;
}
.t-shirt {
  height: 100%;
  width: 100%;
}
.t-shirt path {
  fill: hsl(var(--hue, 10), 60%, 65%);
  stroke: #333;
  transform: scaleX(var(--width, 1)) scaleY(var(--length, 1));
  transform-origin: 50% 0%;
  transition: transform 0.2s cubic-bezier(.2,.7,.8,1.7), fill 0.2s cubic-bezier(.2,.7,.8,1.7);
}
.t-shirt__badge {
  height: 15%;
  width: 15%;
  background: #fff;
  border-radius: 5%;
  border: 2px solid #333;
  position: absolute;
  top: 30%;
  left: 55%;
  transform: translate(-50%, 0%);
}
.t-shirt__badge:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 110%;
  width: 10%;
  background: #bf9540;
  bottom: 95%;
  left: 50%;
  transform: translate(-50%, 0);
}
.t-shirt__badge:after {
  content: var(--size, "S");
  font-family: sans-serif;
  font-weight: bold;
  color: hsl(0, 0%, 20%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.t-shirt__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1)) scaleX(1);
  width: 200px;
  height: 200px;
  transition: transform 0.1s, background 0.1s;
}
@container (min-width: 300px) and (min-height: 300px) {
  .t-shirt__container {
    --scale: 1.5;
    --size: "M";
    --hue: 210;
  }
}
@container (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --scale: 2;
    --size: "L";
    --hue: 104;
  }
}
@container (min-width: 500px) and (min-height: 500px) {
  .t-shirt__container {
    --scale: 2.5;
    --size: "XL";
    --hue: 280;
  }
}
@media --css-container and (min-width: 300px) and (min-height: 300px) {
  .t-shirt__container {
    --scale: 1.5;
    --size: "M";
    --hue: 210;
  }
}
@media --css-container and (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --scale: 2;
    --size: "L";
    --hue: 104;
  }
}
@media --css-container and (min-width: 500px) and (min-height: 500px) {
  .t-shirt__container {
    --scale: 2.5;
    --size: "XL";
    --hue: 280;
  }
}
.instructions {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 5%;
  background: #fafafa;
}

@keyframes bounce {
  0, 100% {
    transform: rotate(-15deg) translate(0, 0) scale(1);
  }
  50% {
    transform: rotate(-15deg) translate(0, -15%) scale(1.15);
  }
}

JavaScript

(({
    every: e,
    indexOf: t,
    slice: s
} = Array.prototype, n = globalThis.document, o = n && CSS.supports("contain: layout inline-size"), i = ":not(*)", l = /$\s*(min|max)-(height|width):\s*([^\s]+)\s*$/, c = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)(.*)$/, r = new Set, a = new WeakMap, d = [], f = [], u = (e => e.length ? `:where(${e.join(",")})` : i), h = (e => {
    let s, n = "";
    for (; s = e.parentElement;) {
        n = ` > :nth-child(${t.call(s.children,e)+1})${n}`, e = s
    }
    return ":root" + n
}), m = (e => /inline/i.test(getComputedStyle(e).display)), p = ((e, s) => t.call(e.cssRules || [], s)), w = (e => s.call(e.cssRules || [])), g = ((e, t, s) => e.cssRules[e.insertRule(t, s)]), y = (() => {
    for (const [e, t, s, n] of d) {
        const n = new Set;
        for (const t of r)
            if (s(t, a.get(t)))
                for (const s of t.querySelectorAll(e)) n.add(s);
        const o = [];
        for (const e of n) {
            const t = h(e);
            o.push(t)
        }
        const l = o.length ? `:is(${e}):where(${o.join(",")})` : i;
        t.selectorText !== l && (t.selectorText = l)
    }
}), $ = ((t, s, n, o, l) => {
    const c = p(n, s),
        getFallbackCssText = e => `${i}{transform:scale3d(1,1,1);${o?`inline-size:${e?0:100}%;`:""}${l?`block-size:${e?0:100};`:""}}`,
        d = `@media all{${getFallbackCssText(!0)}${getFallbackCssText(!1)}}`,
        w = g(n, d, c),
        [y, $] = w.cssRules;
    let x = [];
    const onMutation = () => {
        const n = [],
            i = [],
            c = t.querySelectorAll(s.selectorText);
        if (!(c.length === x.length && e.call(c, ((e, t) => e === x[t])))) {
            r.clear(), b.disconnect();
            for (const e of c) {
                r.add(e), a.set(e, [o, l]);
                const t = h(e);
                m(e) ? i.push(t) : n.push(t), b.observe(e)
            }
            const e = u(i);
            y.selectorText !== e && (y.selectorText = e);
            const t = u(n);
            $.selectorText !== t && ($.selectorText = t), x = c
        }
    };
    onMutation(), f.push(onMutation), z.observe(t, {
        attributes: !0,
        childList: !0,
        subtree: !0
    })
}), x = ((e, t) => {
    const getCssStyleRuleContainValues = e => e.style ? e.style.getPropertyValue("--css-contain").trim().toLowerCase().split(/\s+/) : [],
        walkCssParent = t => {
            for (const s of w(t)) {
                walkCssParent(s);
                const n = getCssStyleRuleContainValues(s),
                    o = n.includes("layout"),
                    i = n.includes("size"),
                    l = o && (i || n.includes("inline-size")),
                    c = o && (i || n.includes("block-size"));
                (l || c) && $(e, s, t, l, c)
            }
        };
    walkCssParent(t)
}), S = ((e, t) => {
    const walkCssParent = t => {
        for (const s of w(t)) {
            if (0 === (s.media ? s.media.mediaText : "").indexOf("--css-container")) {
                const n = s.media[0].match(l);
                if (n) {
                    const [, o, l, r] = n, [, a, f] = r.match(c), doesFulfillQuery = (t, s, n) => {
                        if (!(n !== ("block-size" === l || "height" === l)) && !(s !== ("inline-size" === l || "width" === l))) return !1;
                        const i = t.getBoundingClientRect()[l],
                            c = Number(a) * ("em" === f ? parseInt(window.getComputedStyle(t).fontSize) : "rem" === f ? parseInt(window.getComputedStyle(e.documentElement).fontSize) : "vh" === f ? window.innerHeight / 100 : "vw" === f ? window.innerWidth / 100 : 1);
                        return "min" === o ? i >= c : i <= c
                    }, u = p(t, s), h = g(t, "@media all{}", u);
                    let m = 0;
                    for (const e of w(s)) {
                        const t = e.selectorText;
                        if (t) {
                            const s = e.cssText.slice(t.length),
                                n = g(h, `${i}${s}`, m++);
                            d.push([t, n, doesFulfillQuery])
                        }
                    }
                }
            }
            walkCssParent(s)
        }
    };
    walkCssParent(t), y()
}), b, z) => (e = n) => {
    if (n && !o) {
        let t = 0;
        const {
            styleSheets: s
        } = e, onMutation = () => {
            for (const e of f) e()
        }, onFrame = () => {
            const n = s.length;
            if (n !== t) {
                for (; t < n;) {
                    const n = s[t++];
                    !n || n.href && !n.href.startsWith(location.origin) || (S(e, n), x(e, n))
                }
                t = n
            }
            requestAnimationFrame(onFrame)
        };
        b = new ResizeObserver(y), z = new MutationObserver(onMutation), onFrame()
    }
})()()

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg