倾斜产品卡

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.13/tailwind.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --cyberpunk-yellow: #f0e801;
  --among-us-red: #c51110;
  --fall-guys-pink: #fa40a3;
}

.bg-cyberpunk:hover {
  background: var(--cyberpunk-yellow);
}
.bg-among-us:hover {
  background: var(--among-us-red);
}
.bg-fall-guys:hover {
  background: var(--fall-guys-pink);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

.card {
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.name {
  transform: translate3d(0, 0, 50px);
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.card:hover .name {
  top: 1rem;
  opacity: 1;
}

.buy {
  left: 50%;
  transform: translate3d(-50%, 0, 50px);
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.card:hover .buy {
  bottom: 1rem;
  opacity: 1;
}

img {
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.card:hover img {
  transform: translate3d(0, 0, 50px);
  transform-style: preserve-3d;
}

.image::before {
  content: "";
  border-radius: .25rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .25rem;
  opacity: 0;
  transition: all .5s;
}

.card:hover .image::before {
  opacity: .2;
}

.image-1::before {
  background: center / cover url("https://www.jq22.com/newjs/c1.jpg");
}
.image-2::before {
  background: center / cover url("https://www.jq22.com/newjs/c2.jpg");
}
.image-3::before {
  background: center / cover url("https://www.jq22.com/newjs/c3.jpg");
}

JavaScript

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