HTML&CSS:3D 旋转卡片的炫酷动画

效果演示

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

HTML

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

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轴上旋转。
相关推荐
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue