当前位置：首页 > article >正文

HTMLCSS：3D 旋转卡片的炫酷动画

article 2024/11/6 15:47:00

效果演示

这段代码是一个HTML和CSS的组合，用于创建一个具有3D效果的动画卡片。

HTML

<div class="obj">
  <div class="objchild">
    <span class="inn6">
      <h3 class="text">我是谁？我在那</h3>
    </span>
  </div>
</div>

obj：创建了一个类名为 “obj” 的div元素，它将作为3D对象的容器。
objchild：创建了一个类名为 “objchild” 的div元素，它将作为3D对象的子元素。
inn6：创建了一个类名为 “inn6” 的span元素，它将包含文本内容。
text：创建了一个标题为 “我是谁？我在那” 的h3元素，它将显示在页面上。

CSS

.obj {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: 0.5s all;
  transform: rotateX(-25deg) rotateY(20deg);

}

.objchild {
  animation: rotate 4s infinite linear;
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.objchild::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  box-shadow: 0 0 200px 15px white;
  transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}

.inn6 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(21, 21, 21);
  transform: rotateX(90deg) translateZ(100px);
  animation: updown 4s infinite ease-in-out;
  border-radius: 10px;
}

.text {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  font-weight: 600;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }

  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

@keyframes updown {
  0% {
    transform: translateY(100px) rotateX(90deg) translateZ(100px);
  }

  50% {
    transform: translateY(200px);
  }

  100% {
    transform: translateY(100px) rotateX(450deg) translateZ(100px);
  }
}

.obj 类定义了一个相对定位的容器，宽200px，高200px。transform-style: preserve-3d; 保持3D效果，transition: 0.5s all; 表示所有属性的过渡时间为0.5秒。transform: rotateX(-25deg) rotateY(20deg); 表示对象将绕X轴旋转-25度，绕Y轴旋转20度。
.objchild 类定义了一个绝对定位的子元素，它将填满其父元素。animation: rotate 4s infinite linear; 表示动画名为 “rotate”，持续时间为4秒，无限循环，线性速度。transform-style: preserve-3d; 保持3D效果。
.objchild::after 是一个伪元素，用于创建一个模糊的白色光晕效果。filter: blur(20px); 应用20像素的模糊效果，box-shadow: 0 0 200px 15px white; 创建一个白色的阴影效果，transform: rotateX(90deg) scale(1.1) translateZ(-120px); 表示伪元素将绕X轴旋转90度，放大1.1倍，并在Z轴上向后移动。
.inn6 类定义了一个绝对定位的span元素，它将填满其父元素。背景色为黑色，transform: rotateX(90deg) translateZ(100px); 表示元素将绕X轴旋转90度，并在Z轴上向前移动100px。animation: updown 4s infinite ease-in-out; 表示动画名为 “updown”，持续时间为4秒，无限循环，缓动函数为ease-in-out。
@keyframes rotate 定义了一个名为 “rotate” 的关键帧动画，从0度旋转到360度。
@keyframes updown 定义了一个名为 “updown” 的关键帧动画，元素将上下移动，并在X轴和Z轴上旋转。

查看全文

http://www.kler.cn/a/381735.html