cqfill实现一个容器查询拖动容器大小显示不同内容的效果代码-html代码-BFW代码库

cqfill实现一个容器查询拖动容器大小显示不同内容的效果代码

代码语言：html

所属分类：响应式

代码描述：cqfill实现一个容器查询拖动容器大小显示不同内容的效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
*,
*: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%);
  -webkit-animation: bounce 0.5s infinite linear;
          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: &.........完整代码请登录后点击上方下载按钮下载查看