如何将 ken burns 效果添加到此滑块? [英] How can I add the ken burns effect to this slider?
本文介绍了如何将 ken burns 效果添加到此滑块?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谁能解释如何将 Ken Burns 效果添加到 此 滑块?
can anyone explain how to add the Ken Burns effect to this slider?
我尝试在关键帧中添加以下内容，但没有成功:
I tried adding the following to the keyframes but it didn't work:
95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
animation-timing-function: ease-in;
opacity: 1;
}
100% {
transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
opacity: 0;
}
在这种情况下它不起作用的解释是什么?
what is the explanation that it doesn't work on this case?
为了简单起见，这里是原始的 CSS 代码:
Here is the original CSS code only for simplicity:
$main: #777;
$back: #aaa;
$accent: hsl(220,50%,40%);
$sans: 'Open Sans', sans-serif;
$heebo: 'Heebo', sans-serif;
$base: 3vh;
$time: 1800ms;
$ease-out: cubic-bezier(0.260, 0.005, 0.135, 1.000);
$ease-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860);
body{
background: $back;
font-family: $sans
}
.slider{
position: relative;
height: 100vh;
width: 100vw;
background: $main;
overflow: hidden;;
&__wrap{
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform $time/4 $ease-in-out;
transform-origin: 0% 50%;
transition-delay: $time/4;
opacity: 0;
&--hacked{
opacity: 1;
}
}
&__back{
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter $time/4 $ease-in-out;
}
&__inner{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, opacity $time/4 step-end;
opacity: 0;
box-shadow: 0 $base $base rgba(darken($accent,50%),0);
padding: $base*5;
box-sizing: border-box;
}
&__content{
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: $heebo;
opacity: 0;
transition: opacity $time/4;
h1{
font-weight: 900;
font-size: $base*3;
line-height: 0.85;
margin-bottom: $base/4;
pointer-events: none;
text-shadow: 0 $base/8 $base/4 rgba(darken($accent,50%),0.1);
}
a{
cursor: pointer;
font-size: $base*0.8;
letter-spacing: $base*0.1;
font-weight: 100;
position: relative;
&:after{
content: '';
display: block;
width: $base*3;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: $base*2;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform $time/2 $ease-in-out;
}
&:before{
content: '';
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: $base/3;
height: $base/3;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: $heebo;
font-weight: 100;
top: 50%;
left: $base*5;
transition: transform $time/2 $ease-in-out;
}
&:hover{
&:after{
transform: scaleX(1.5);
transition: transform $time*2/3 $ease-in-out;
}
&:before{
transform: translateX(#{$base*2}) translateY(-50%) rotate(45deg);
transition: transform $time*2/3 $ease-in-out;
}
}
}
}
&__slide{
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
//transform: translatex(-100%);
transition: transform $time/3 $ease-in-out;
transition-delay: $time/3;
pointer-events: none;
z-index: 0;
&--active{
transform: translatex(0%);
z-index: 2;
.slider__wrap{
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
animation: none;
}
.slider__back{
filter: blur(#{$base*0.5});
transition: filter $time/2 $ease-in-out;
transition-delay: $time/2 !important;
}
.slider__inner{
transform: scale(0.80);
box-shadow: 0 $base/3 $base*2 rgba(darken($accent,50%),0.2);
pointer-events: auto;
opacity: 1;
transition: transform $time/2 $ease-in-out, box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
transition-delay: $time/2;
}
.slider__content{
opacity: 1;
transition-delay: $time*3/4;
}
}
&:not(.slider__slide--active) .slider__wrap{
@keyframes hack{
0%{
transform: translateX(0);
opacity: 1;
}
50%{
transform: translateX(-100vw);
opacity: 1;
}
51%{
transform: translateX(-100vw);
opacity: 0;
}
52%{
transform: translateX(100vw);
opacity: 0;
}
100%{
transform: translateX(100vw);
opacity: 1;
}
}
animation-name: hack;
animation-duration: $time/2;
animation-delay: $time/4;
animation-timing-function: $ease-in-out;
}
&:nth-child(1) .slider__back, &:nth-child(1) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=931);
//background: #eee;
}
&:nth-child(2) .slider__back, &:nth-child(2) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=929);
//background: #aaa;
}
&:nth-child(3) .slider__back, &:nth-child(3) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=927);
//background: #888;
}
}
}
.sig{
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255,255,255,0.4);
letter-spacing: 2px;
z-index: 9999;
}
我还是一个初学者，所以请尽可能详细解释.谢谢.
I'm still a beginner, so please try to explain in detail if possible. Thank you.
推荐答案
在scss下面试试:
$main: #777;
$back: #aaa;
$accent: hsl(220,50%,40%);
$sans: 'Open Sans', sans-serif;
$heebo: 'Heebo', sans-serif;
$base: 3vh;
$time: 1800ms;
$time_back: 20s;
$ease-out: cubic-bezier(0.0, 0.0, 0.0, 1.0);
$ease-in-out: cubic-bezier(0.0, 0.0, 0.0, 1.0);
body{
background: $back;
font-family: $sans
}
.slider{
position: relative;
height: 100vh;
width: 100vw;
background: $main;
overflow: hidden;;
&__wrap{
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform $time/4 $ease-in-out;
transform-origin: 0% 50%;
transition-delay: $time/4;
opacity: 0;
&--hacked{
opacity: 1;
}
}
&__back{
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter $time/4 $ease-in-out;
}
&__inner{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, opacity $time/4 step-end;
opacity: 0;
box-shadow: 0 $base $base rgba(darken($accent,50%),0);
padding: $base*5;
box-sizing: border-box;
}
&__content{
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: $heebo;
opacity: 0;
transition: opacity $time/4;
h1{
font-weight: 900;
font-size: $base*3;
line-height: 0.85;
margin-bottom: $base/4;
pointer-events: none;
text-shadow: 0 $base/8 $base/4 rgba(darken($accent,50%),0.1);
}
a{
cursor: pointer;
font-size: $base*0.8;
letter-spacing: $base*0.1;
font-weight: 100;
position: relative;
&:after{
content: '';
display: block;
width: $base*3;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: $base*2;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform $time/2 $ease-in-out;
}
&:before{
content: '';
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: $base/3;
height: $base/3;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: $heebo;
font-weight: 100;
top: 50%;
left: $base*5;
transition: transform $time/2 $ease-in-out;
}
&:hover{
&:after{
transform: scaleX(1.5);
transition: transform $time*2/3 $ease-in-out;
}
&:before{
transform: translateX(#{$base*2}) translateY(-50%) rotate(45deg);
transition: transform $time*2/3 $ease-in-out;
}
}
}
}
&__slide{
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
//transform: translatex(-100%);
transition: transform $time/3 $ease-in-out;
transition-delay: $time/3;
pointer-events: none;
z-index: 0;
&--active{
transform: translatex(0%);
z-index: 2;
.slider__wrap{
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
animation: none;
}
.slider__back{
filter: blur(#{$base*0.5});
transition: filter $time/2 $ease-in-out;
transition-delay: $time/2 !important;
}
.slider__inner{
transform: scale(0.80);
box-shadow: 0 $base/3 $base*2 rgba(darken($accent,50%),0.2);
pointer-events: auto;
opacity: 1;
transition: transform $time_back/2 $ease-in-out, box-shadow $time_back/2 $ease-in-out, opacity 1ms step-end;
transition-delay: $time/2;
}
.slider__content{
opacity: 1;
transition-delay: $time*3/4;
}
}
&:not(.slider__slide--active) .slider__wrap{
@keyframes hack{
0%{
transform: translateX(0);
opacity: 1;
}
50%{
transform: translateX(-100vw);
opacity: 1;
}
51%{
transform: translateX(-100vw);
opacity: 0;
}
52%{
transform: translateX(100vw);
opacity: 0;
}
100%{
transform: translateX(100vw);
opacity: 1;
}
}
animation-name: hack;
animation-duration: $time/2;
animation-delay: $time/4;
animation-timing-function: $ease-in-out;
}
&:nth-child(1) .slider__back, &:nth-child(1) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=931);
//background: #eee;
}
&:nth-child(2) .slider__back, &:nth-child(2) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=929);
//background: #aaa;
}
&:nth-child(3) .slider__back, &:nth-child(3) .slider__inner{
background-image: url(https://unsplash.it/1600/800/?image=927);
//background: #888;
}
}
}
.sig{
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255,255,255,0.4);
letter-spacing: 2px;
z-index: 9999;
}
这篇关于如何将 ken burns 效果添加到此滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
