新余市建设局网站,2021国内军事新闻大事件,网站规范建设,网站空间如何搬家效果演示 实现了一个3D翻转的卡片动画#xff0c;其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放#xff0c;无限次。整个页面的背景是一个占据整个屏幕的背景图片#xff0c;并且页面内容被隐藏在背景图片之下。 Code
div classcontainer…
效果演示 实现了一个3D翻转的卡片动画其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放无限次。整个页面的背景是一个占据整个屏幕的背景图片并且页面内容被隐藏在背景图片之下。 Code
div classcontainerdiv classcard-boxdiv classcardimg src./img/鞠婧祎04.jpg/divdiv classcardimg src./img/章若楠01.jpg/divdiv classcardimg src./img/鞠婧祎02.jpg/div/div
/divbody {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的动画包括四个关键帧分别对应卡片的旋转角度和位置。
