效果演示
这段代码是一个HTML和CSS的组合,用于创建一个具有3D翻转效果的卡片,当鼠标悬停在卡片上时,卡片会翻转显示背面内容。
HTML
<div class="myCard">
<div class="innerCard">
<div class="frontSide">
<p class="title">前</p>
<p>鼠标移入</p>
</div>
<div class="backSide">
<p class="title">后</p>
<p>鼠标移出</p>
</div>
</div>
</div>
- myCard 创建了一个类名为 “myCard” 的div元素,它将作为卡片的容器。
- innerCard 创建了一个类名为 “innerCard” 的div元素,它将作为卡片的内部结构。
- frontSide 和 backSide 分别创建了类名为 “frontSide” 和 “backSide” 的div元素,它们分别代表卡片的正面和背面。
- title,分别显示在卡片的正面和背面,显示文字“前”和“后”。
- p创建了两个段落,分别显示在卡片的正面和背面,提示用户鼠标的移入和移出动作。
CSS
.myCard {
background-color: transparent;
width: 190px;
height: 254px;
perspective: 1000px;
}
.title {
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 0;
}
.innerCard {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;
}
.myCard:hover .innerCard {
transform: rotateY(180deg);
}
.frontSide,
.backSide {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 1rem;
color: white;
box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
font-weight: 700;
}
.frontSide,
.frontSide::before {
background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}
.backSide,
.backSide::before {
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.backSide {
transform: rotateY(180deg);
}
.frontSide::before,
.backSide::before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
width: 110%;
height: 110%;
position: absolute;
z-index: -1;
border-radius: 1em;
filter: blur(20px);
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
opacity: 0.3;
}
80% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
- .myCard 类定义了卡片容器的样式,背景透明,宽度200px,高度180px,perspective: 1000px; 定义了3D空间的透视效果。
- .title 类定义了标题的样式,字体大小为1.5em,字体加粗,文本居中,无外边距。
- .innerCard 类定义了卡片内部结构的样式,相对定位,宽度和高度填满容器,文本居中,transition: transform 0.8s; 表示变换效果的过渡时间为0.8秒,transform-style: preserve-3d; 保持3D效果,cursor: pointer; 将鼠标光标设置为指针形状。
- 当鼠标悬停在 .myCard 上时,.innerCard 将绕Y轴旋转180度,从而显示卡片的背面。
- .frontSide 和 .backSide 类定义了卡片正面和背面的样式,绝对定位,显示为flex布局,宽度和高度填满容器,backface-visibility: hidden; 隐藏背面,边框、圆角、颜色和字体加粗。
- .frontSide 和它的伪元素 ::before 定义了正面的背景渐变效果。
- .backSide 和它的伪元素 ::before 定义了背面的背景渐变效果。
- .backSide 类定义了背面的初始状态,绕Y轴旋转180度,使其在卡片背面。
- .frontSide::before 和 .backSide::before 伪元素定义了一个绝对定位的覆盖层,用于创建模糊效果,animation: animate 5s linear infinite; 定义了一个名为 “animate” 的动画,使模糊效果循环变化。
- @keyframes animate 定义了一个关键帧动画 “animate”,用于控制伪元素的透明度变化,从0.3变化到1再回到0.3,形成循环动画效果。