效果演示
实现了一个3D翻转的卡片动画,其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放,无限次。整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。
Code
<div class="container">
<div class="card-box">
<div class="card">
<img src="./img/鞠婧祎04.jpg">
</div>
<div class="card">
<img src="./img/章若楠01.jpg">
</div>
<div class="card">
<img src="./img/鞠婧祎02.jpg">
</div>
</div>
</div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
height: 350px;
margin-top: 60px;
perspective: 1000px;
position: relative;
}
.card-box {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(0) translateZ(-700px);
animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.card {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}
.card img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.card:nth-child(1) {
transform: rotateY(0) translateZ(700px);
}
.card:nth-child(2) {
transform: rotateY(120deg) translateZ(700px);
}
.card:nth-child(3) {
transform: rotateY(240deg) translateZ(700px);
}
@keyframes cardRotate {
0%,
20% {
transform: translateZ(-700px) rotateY(0);
}
45% {
transform: translateZ(-700px) rotateY(-120deg);
}
75% {
transform: translateZ(-700px) rotateY(-240deg);
}
100% {
transform: translateZ(-700px) rotateY(-360deg);
}
}
实现思路拆分
body {
height: 100vh; /* 设置页面高度为视口高度 */
display: flex; /* 使用弹性布局 */
justify-content: center; /* 居中水平 */
align-items: center; /* 居中垂直 */
background-color: #e8e8e8; /* 设置背景颜色 */
overflow: hidden; /* 隐藏溢出部分 */
}
这段代码设置了页面的基本样式,包括高度、居中、背景颜色和溢出部分的隐藏。
* {
margin: 0;
padding: 0;
}
这段代码取消了所有的内外边距,使得页面更加整洁。
.container {
width: 600px; /* 设置容器宽度 */
height: 350px; /* 设置容器高度 */
margin-top: 60px; /* 设置容器与页面顶部的距离 */
perspective: 1000px; /* 设置容器的透视效果 */
position: relative; /* 设置容器为相对定位 */
}
这段代码设置了容器的基本样式,包括宽度、高度、与页面顶部的距离、透视效果和相对定位。
.card-box {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(0) translateZ(-700px);
animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
这段代码设置了卡片盒子的基本样式,包括绝对定位、宽度、高度、3D效果、动画效果和无限次播放。
.card {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}
这段代码设置了卡片的基本样式,包括绝对定位、宽度、高度、倒影效果。
.card img {
width: 100%;
height: 100%;
border-radius: 10px;
}
这段代码设置了卡片图片的基本样式,包括宽度、高度和圆角。
.card:nth-child(1) {
transform: rotateY(0) translateZ(700px);
}
.card:nth-child(2) {
transform: rotateY(120deg) translateZ(700px);
}
.card:nth-child(3) {
transform: rotateY(240deg) translateZ(700px);
}
这段代码设置了每张卡片的初始位置和旋转角度。
@keyframes cardRotate {
0%,
20% {
transform: translateZ(-700px) rotateY(0);
}
45% {
transform: translateZ(-700px) rotateY(-120deg);
}
75% {
transform: translateZ(-700px) rotateY(-240deg);
}
100% {
transform: translateZ(-700px) rotateY(-360deg);
}
}
这段代码定义了一个名为cardRotate的动画,包括四个关键帧,分别对应卡片的旋转角度和位置。