卡片动画

下载代码

html

css

分享到微信朋友圈

html

css

@keyframes reappear {
  from {
    top: 0px;
  }
  to {
    top: -50px;
  }
}
html,
body {
  background-color: #1e1e1e;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  width: 100vw;
}

.roboto-mono {
  font-family: "Roboto Mono", monospace;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
body .background-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
body #card-display-background {
  background-image: url("https://images.unsplash.com/photo-1555992336-fb0d29498b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80");
  height: 100%;
  left: 50%;
  max-width: 1800px;
  opacity: 0.25;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}
body #card-display-background:after, body #card-display-background:before {
  content: "";
  height: inherit;
  left: 0px;
  position: absolute;
  top: 0px;
  width: inherit;
  z-index: 1;
}
body #card-display-background:after {
  background: linear-gradient(to top, #1e1e1e, transparent, #1e1e1e);
}
body #card-display-background:before {
  background: linear-gradient(to right, #1e1e1e 5%, transparent 20%, transparent 80%, #1e1e1e 95%);
}
body #card-display-wrapper {
  position: relative;
  transition: transform 250ms;
  z-index: 2;
}
body #card-display-wrapper #card-display {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 2;
}
body #card-display-wrapper #card-display.transition {
  transition: transform 500ms;
}
body #card-display-wrapper #card-display .card-wrapper {
  background-color: transparent;
  border: none;
  border-radius: 15px;
  outline: none;
  padding: 0px;
  position: relative;
  transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper:first-of-type {
  transform: scale(0.85);
}
body #card-display-wrapper #card-display .card-wrapper:first-of-type .card {
  background-color: #ef5350;
}
body #card-display-wrapper #card-display .card-wrapper:nth-of-type(2) {
  transform: scale(0.95);
}
body #card-display-wrapper #card-display .card-wrapper:last-of-type {
  transform: scale(0.85);
}
body #card-display-wrapper #card-display .card-wrapper:last-of-type .card {
  background-color: #29b6f6;
}
body #card-display-wrapper #card-display .card-wrapper:hover {
  transform: scale(1);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-left {
  transform: translate(-30%, -30%);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-right {
  transform: translate(30%, -30%);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-icon {
  transform: translate(-20px, 20%) scale(1.2) rotate(-10deg);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card-chef {
  opacity: 1;
  top: -50px;
}
body #card-display-wrapper #card-display .card-wrapper:active {
  transform: scale(0.95);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-left {
  transform: translate(-30%, -30%) scale(1.2);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-right {
  transform: translate(30%, -30%) scale(1.2);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-icon {
  transform: translate(-20px, 20%) scale(1.4) rotate(-10deg);
}
body #card-display-wrapper #card-display .card-wrapper.selected .card-chef {
  opacity: 0;
  top: -500px;
  transition: opacity 500ms, top 500ms;
}
body #card-display-wrapper #card-display .card-wrapper.chef-reappear .card-chef {
  animation: reappear 250ms ease-in;
}
body #card-display-wrapper #card-display .card-wrapper:not(.chef-reappear, .selected):active .card-chef {
  top: -20px;
}
body #card-display-wrapper #card-display .card-wrapper .card {
  background-color: #141414;
  border-radius: inherit;
  box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  height: 300px;
  position: relative;
  width: 485px;
  z-index: 2;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs {
  border-radius: inherit;
  height: 100%;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 2;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg {
  opacity: 0.1;
  position: absolute;
  transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-left {
  left: 0px;
  top: 50%;
  transform: translate(-25%, -25%);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-right {
  right: 0px;
  top: -50%;
  transform: translate(25%, -25%);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-amount {
  bottom: 0px;
  color: white;
  font-size: 5em;
  left: 0px;
  position: absolute;
  transform: translate(20px, -20px);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-brand {
  color: white;
  font-size: 2.5em;
  position: absolute;
  right: 0px;
  top: 0px;
  transform: translate(-30px, 30px);
  transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-icon {
  bottom: 0px;
  color: white;
  font-size: 10em;
  position: absolute;
  right: 0px;
  transform: translate(-20px, 20%);
  transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef {
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 250ms, top 250ms;
  z-index: 1;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef i {
  color: white;
  text-align: center;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-user-chef {
  color: white;
  font-size: 3.5em;
  height: 60px;
  line-height: 60px;
  width: 50px;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-fire {
  bottom: 0px;
  font-size: 2em;
  left: 50%;
  position: absolute;
  transform: rotate(180deg) translate(50%, -90%);
}

JavaScript

const DOM = {
  class: {
    add: (element, name, delay) => element.classList.add(name),
    get: (element, name) => element.getElementsByClassName(name),
    has: (element, name) => element.classList.contains(name),
    remove: (element, name) => element.classList.remove(name),
    transition: (element, name, duration) => {
      if(DOM.class.has(element, name)) {
        DOM.class.remove(element, name);
      }
      
      DOM.class.add(element, name);

setTimeout(() => DOM.class.remove(element, name), duration);        
    }
  },
  get: id => document.getElementById(id)
}

const N = {
  clamp: (min, value, max) => Math.min(Math.max(min, value), max)
}

const display = DOM.get("card-display");

const card1 = DOM.get("card-1"),
      card2 = DOM.get("card-2"),
      card3 = DOM.get("card-3");

display.onmousemove = e => {
  const rect = display.getBoundingClientRect();

const x = e.clientX - rect.left,
        y = e.clientY - rect.top;

const xPercent = x / display.clientWidth,
        yPercent = y / display.clientHeight;

const xDeg = T.range(-10, yPercent),
        yDeg = T.range(10, xPercent);

display.style.transform = `perspective(1200px) rotateX(${xDeg}deg) rotateY(${yDeg}deg)`;
};

display.onmouseleave = e => {
  DOM.class.transition(display, "transition", 500);

display.style.transform = `perspective(1200px) rotateX(0deg) rotateY(0deg)`;
};

const moveChef = (e, element) => {
  const rect = element.getBoundingClientRect(),
        chef = DOM.class.get(element, "card-chef")[0];
  
  const x = e.clientX - rect.left,
        y = e.clientY - rect.top;

const percent = x / element.clientWidth;
  
  const half = chef.clientWidth / 2,        
        value = (element.clientWidth * percent) - half,
        max = element.clientWidth - (chef.clientWidth * 1.5);
  
  const tX = N.clamp(half, value, max);
  
  chef.style.transform = `translateX(${tX}px)`;
}

const releaseCard = element => {
  if(!DOM.class.has(element, "selected") && !DOM.class.has(element, "chef-reappear")) {
    DOM.class.transition(element, "selected", 1000);

setTimeout(() => DOM.class.transition(element, "chef-reappear", 250), 1000);
  }
}

card1.onmousemove = e => moveChef(e, card1);

card1.onmouseup = e => releaseCard(card1);

card2.onmousemove = e => moveChef(e, card2);

card2.onmouseup = e => releaseCard(card2);

card3.onmousemove = e => moveChef(e, card3);

card3.onmouseup = e => releaseCard(card3);

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