目录
效果展示 :
一个小创意,侧向滑入轮播图
基本思路 :
元素从左到右移动,前三个直接可视的元素是倾斜的,中央第四层的元素在中间位置的时候是平行与屏幕的。元素从左到右一层上一层,逐渐变清晰、变大,第三层上第四层的时候变化最大,从第四层到达第五层,即到最右边(如图地五层的位置)的元素在极短的时间回到最左侧,然后再重新开始,如此循环。
HTML:
图片都是国家地理的摄影图片,挺好看的。
.box 控制大小,img 占满 box。
<div class="outest">
<!-- 默认在未上第一层的位置开始 -->
<div class="box">
<img class="img img-0" src="https://img1.baidu.com/it/u=3072057768,858914143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
</div>
<!-- 默认初始位置为在第一层 -->
<div class="box">
<img class="img img-1" src="https://img0.baidu.com/it/u=12043719,3003581147&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
</div>
<!-- 默认初始位置为第二层 -->
<div class="box">
<img class="img img-2" src="https://img1.baidu.com/it/u=1032609868,1354897511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
</div>
<!-- 默认初始位置为第三层 -->
<div class="box">
<img class="img img-3" src="https://img0.baidu.com/it/u=3539901417,650720086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
</div>
<!-- 默认初始位置为舞台中间 -->
<div class="box">
<img class="img img-center" src="https://img2.baidu.com/it/u=2330640232,2293084105&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" >
</div>
</div>
CSS:
CSS写了五个动画,感觉还是有点离谱😅😅,不过还是达到了效果😂😂。。。
html,body{
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right top,#ccfbff , #ef96c5);
}
.outest{
width: 100vw;
height: 100vh;
position: relative;
}
.box{
width: 18vw; /* 控制内容整体大小 */
position: absolute;
top: 50vh;
left: 30vw;
perspective: 400px;
}
.img{
position: absolute;
width: 100%;
border-radius: 6px;
}
.img-0{
animation: default-0 20s linear 0s infinite both;
}
.img-1{
animation: default-1 20s linear 0s infinite both;
}
.img-2{
animation: default-2 20s linear 0s infinite both;
}
.img-3{
animation: default-3 20s linear 0s infinite both;
}
.img-center{
animation: default-center 20s linear 0s infinite both;
}
@keyframes default-0 { /* 初始位置为 全部在屏幕右侧外面 */
0%{ /* 全部到屏幕右侧外面 贴边 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}
1%{ /* 全部到屏幕左侧外面 贴边 */
transform-origin: center;
transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
z-index: 0;
opacity: 0;
}
10%{ /* 没到第一层 */
transform-origin: center;
transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 0;
opacity: 0;
}
20%,30%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
z-index: 1;
opacity: 0.1;
}
40%,50%{ /* 第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}
60%,70%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
75%,90%{ /* 中间 */
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
95%,100%{ /* 全部到达屏幕右侧外面 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}
}
@keyframes default-1 { /* 初始位置为第一层 */
0%,10%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg);
z-index: 1;
opacity: 0.1;
}
20%,30%{ /* 第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}
40%,50%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
55%,70%{ /* 中央 */
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
75%,80%{ /* 全部在屏幕右侧 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}81%{ /* 全部在屏幕左侧 */
transform-origin: center;
transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
z-index: 0;
opacity: 0;
}
90%{ /* 未到第一层 */
transform-origin: center;
transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 0;
opacity: 0.;
}
100%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
z-index: 1;
opacity: 0.1;
}
}
@keyframes default-2 { /* 初始位置为第二层 */
0%,10%{ /* 在第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}
20%,30%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
35%,50%{ /* 中央 */
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
55%,60%{ /* 全部在屏幕右侧 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}61%{ /* 全部在屏幕左侧 */
transform-origin: center;
transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
z-index: 0;
opacity: 0;
}
70%{ /* 未上第一层 */
transform-origin: center;
transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 0;
opacity: 0;
}
80%,90%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
z-index: 1;
opacity: 0.1;
}100%{ /* 第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}
}
@keyframes default-3 { /* 初始位置为第三层 */
0%,10%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
15%,30%{ /* 中央 */
transform-origin: right top;
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
35%,40%{ /* 全部在屏幕右侧 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}
41%{ /* 全部在屏幕左侧 */
transform-origin: center;
transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
z-index: 0;
opacity: 0;
}
50%{ /* 未上第一层 */
transform-origin: center;
transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 0;
opacity: 0;
}
60%,70%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
z-index: 1;
opacity: 0.1;
}80%,90%{ /* 第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}100%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
}
@keyframes default-center { /* 初始位置为中央 */
0%,10%{ /* 中央 */
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
15%,20%{ /* 全部在屏幕右侧 */
transform-origin: center;
transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
z-index: 0;
opacity: 0;
}
21%{ /* 全部在屏幕左侧 */
transform-origin: center;
transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
z-index: 0;
opacity: 0;
}
30%{ /* 未上第一层 */
transform-origin: center;
transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 0;
opacity: 0;
}
40%,50%{ /* 第一层 */
transform-origin: right top;
transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
z-index: 1;
opacity: 0.1;
}
60%,70%{ /* 第二层 */
transform-origin: right top;
transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
z-index: 2;
opacity: 0.3;
}
80%,90%{ /* 第三层 */
transform-origin: right top;
transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
z-index: 3;
opacity: 0.6;
}
95%,100%{ /* 中央 */
transform-origin: center;
transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
}
}