效果演示
这段代码是一个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轴上旋转。