CSS在3D模式卡片动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  font-family: verdana;
  background: #444;
  background-image: linear-gradient(-45deg, #404, #b36);
  height: 100vh;
  margin: 0;
}

.container,
.card {
  border-radius: 25px;
  border: double 5px transparent;
  /*Set both inset and outset box shadow using CSS, separated by , */
  box-shadow: inset -10px -10px 80px 1px rgba(0, 0, 0, 0.3),
    10px 20px 50px 10px rgba(0, 0, 0, 0.5);
}

.container {
  width: 800px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 30px;
  perspective: 660px;
  background-image: linear-gradient(to bottom right, #aaa, #434);
}

.card {
  color: #555;
  text-shadow: 1px 3px 3px rgba(255, 255, 255, 0.7);
  width: 230px;
  height: 200px;
  float: left;
  padding: 20px;
  margin: 15px;
  margin-right: -32px;
  background: #eee;
  background-image: linear-gradient(110deg, #ddd, #888);
  opacity: 0.9;
  backdrop-filter: blur(5px);

/* Animation attributes */
  animation-name: turn-animation; /* any name what you give */
  animation-duration: 6000ms; /* length of one animation cycle*/
  animation-iteration-count: infinite; /* repeats forever */
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}

/* Animation keyframes */
@keyframes turn-animation {
  0% {
    transform: rotate3d(0, 1, 0, 10deg);
  }
  /* Experiment with these numbers at 50% -> */
  50% {
    transform: rotate3d(0, 1, -0.2, 45deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 10deg);
  }
}

/* THE COLORED CARDS */
.top_card {
  background-image: linear-gradient(-70deg, #09c, #5f9);
}

.middle_card {
  background-image: linear-gradient(-70deg, #505, #f68);
  color: #000;
  text-shadow: -2px -2px 3px rgba(255, 255, 255, 0.7);
}

.bottom_card {
  background-image: linear-gradient(-70deg, #03a, #c6f);

font-size: 1.3em;
  text-shadow: 1px 3px 3px rgba(255, 255, 255, 0.7);
}

/* ALL CARD HOVER */
.card:hover {
  opacity: 0.7;
  background-image: linear-gradient(-70deg, #627, #9a9);
  color: #223;
}

.top_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

.middle_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

.bottom_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

JavaScript

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