如何在此滑块上添加Ken Burns效果？ [英] How can I add the ken burns effect to this slider?
本文介绍了如何在此滑块上添加Ken Burns效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谁能解释如何将Ken Burns效果添加到此滑块？ / p>
我尝试将以下内容添加到关键帧中，但没有用：
95％{
transform：scale3d（1.5，1.5，1.5）translate3d（-190px，-120px，0px）;
animation-timing-function功能：缓入；
不透明度：1；
}
100％{
transform：scale3d（2，2，2）translate3d（-170px，-100px，0px）;
不透明度：0；
}
对于这种情况不起作用的解释是什么？
以下是原始CSS代码，只是为了简化：
$ main： ＃777;
$ back：#aaa;
$ accent：hsl（220,50％，40％）;
$ sans： Open Sans，sans-serif；
$ heebo： Heebo，无衬线；
$ base：3vh;
$ time：1800ms;
$ e-out：三次方贝塞尔（0.260，0.005，0.135，1.000）;
渐入渐出：三次贝塞尔曲线（0.785，0.135，0.150，0.860）;
body {
背景：$ back;
字体家族：$ sans
}
.slider {
位置：相对；
高度：100vh；
宽度：100vw；
背景：$ main；
溢出：隐藏；
& __ wrap {
position：absolute;
宽度：100vw；
高度：100vh；
转换：translateX（100vw）;
top：0％；剩余
：0；
对：自动；
溢出：隐藏；
过渡：转换$ time / 4 $ e-in-out；
transform-origin：0％50％;
转换延迟：$ time / 4;
不透明度：0；
&-hacked {
opacity：1;
}
}
& __ back {
位置：绝对；
宽度：100％；
身高：100％；
背景大小：自动100％；
背景位置：居中；
背景重复：无；
转换：过滤$ time / 4 $ e-in-out;
}
& __ inner {
宽度：100％；
身高：100％；
头寸：绝对；
top：0；
还剩：0％；
background-size：自动133.3333％;
背景位置：居中；
背景重复：无；
transform：scale（0.75）;
转换：转换$ time / 4渐进，框阴影$ time / 4渐进，不透明$ time / 4步长；
不透明度：0；
盒子阴影：0 $ base $ base rgba（darken（$ accent，50％），0）;
填充：$ base * 5;
box-sizing：边框框；
}
& __ content {
职位：相对；
最高：50％；
宽度：自动；
转换：translateY（-50％）;
颜色：白色；
字体家族：$ heebo;
不透明度：0；
过渡：不透明度$ time / 4;
h1 {
字体粗细：900；
字体大小：$ base * 3;
行高：0.85；
底边保证金：$ base / 4;
指针事件：无；
文本阴影：0 $ base / 8 $ base / 4 rgba（darken（$ accent，50％），0.1）;
}
a {
光标：指针；
字体大小：$ base * 0.8;
字母间距：$ base * 0.1；
字体粗细：100;
职位：相对；
&：after {
content：’’;
显示：块；
宽度：$ base * 3；
背景：白色；
高度：1像素；
头寸：绝对；
最高：50％；剩下的
：$ base * 2;
转换：translateY（-50％）;
transform-origin：0％50％;
转换：转换$ time / 2 $ e-in-out；
}
&：before {
content：’’;
border-top：1像素纯白；
border-right：1px纯白色；
显示：块；
宽度：$ base / 3；
高度：$ base / 3；
转换：translateX（0）平移Y（-50％）旋转（45deg）；
头寸：绝对；
字体家族：$ heebo;
字体粗细：100;
最高：50％；还剩下
：$ base * 5;
转换：转换$ time / 2 $ e-in-out；
}
&：hover {
&：after {
transform：scaleX（1.5）;
过渡：转换$ time * 2/3 $ e-in-out；
}
&：before {
transform：translateX（＃{$ base * 2}）translateY（-50％）rotation（45deg）;
过渡：转换$ time * 2/3 $ e-in-out；
}
}
}
}
& __ slide {
位置：绝对；剩余
：0；
高度：100vh；
宽度：100vw；
//转换：translatex（-100％）;
过渡：转换$ time / 3 $ e-in-out；
转换延迟：$ time / 3;
指针事件：无；
z-index：0;
&-active {
transform：translatex（0％）;
z-index：2；
.slider__wrap {
transform：translateX（0）;
转换来源：100％50％；
不透明度：1；
动画：无；
}
.slider__back {
filter：blur（＃{$ base * 0.5}）;
转换：过滤$ time / 2 $ e-in-out;
transition-delay：$ time / 2！important;
}
.slider__inner {
transform：scale（0.80）;
盒子阴影：0 $ base / 3 $ base * 2 rgba（darken（$ accent，50％），0.2）;
指针事件：自动；
不透明度：1；
转换：转换$ time / 2渐入渐出，阴影阴影$ time / 2渐入渐出，不透明度1ms步进；
转换延迟：$ time / 2;
}
.slider__content {
不透明度：1；
转换延迟：$ time * 3/4;
}
}
&：not（.slider__slide--active）.slider__wrap {
@keyframes hack {
0％{
转换：translateX（0）;
不透明度：1；
}
50％{
转换：translateX（-100vw）;
不透明度：1；
}
51％{
transform：translateX（-100vw）;
不透明度：0；
}
52％{
transform：translateX（100vw）;
不透明度：0；
}
100％{
转换：translateX（100vw）;
不透明度：1；
}
}
animation-name：hack;
动画持续时间：$ time / 2;
动画延迟：$ time / 4;
动画定时功能：$ ease-in-out;
}
&：nth-child（1）.slider__back，&：nth-child（1）.slider__inner {
background-image：url（https：/ /unsplash.it/1600/800/?image=931）；
//背景：#eee;
}
&：nth-child（2）.slider__back，&：nth-child（2）.slider__inner {
background-image：url（https://unsplash.it / 1600/800 /？image = 929）;
//背景：#aaa;
}
&：nth-child（3）.slider__back，&：nth-child（3）.slider__inner {
background-image：url（https://unsplash.it / 1600/800 /？image = 927）;
//背景：＃888;
}
}
}
.sig {
位置：固定；
底部：8像素；
：8px；
文字修饰：无；
font-size：12px;
字体粗细：100;
字体家族：sans-serif;
颜色：rgba（255,255,255,0.4）;
字母间距：2px；
z索引：9999；
}
我仍然是初学者，所以请尝试详细解释。谢谢。
解决方案
在下面的scss中尝试：
$ main：＃777;
$ back：#aaa;
$ accent：hsl（220,50％，40％）;
$ sans： Open Sans，sans-serif；
$ heebo： Heebo，无衬线；
$ base：3vh;
$ time：1800ms;
$ time_back：20秒；
$ e-out：三次方贝塞尔（0.0，0.0，0.0，1.0）;
e-in-out：三次贝塞尔曲线（0.0，0.0，0.0，1.0）;
body {
背景：$ back;
字体家族：$ sans
}
.slider {
位置：相对；
高度：100vh；
宽度：100vw；
背景：$ main；
溢出：隐藏；
& __ wrap {
position：absolute;
宽度：100vw；
高度：100vh；
转换：translateX（100vw）;
top：0％；剩余
：0；
对：自动；
溢出：隐藏；
转换：转换$ time / 4 $ e-in-out；
transform-origin：0％50％;
转换延迟：$ time / 4;
不透明度：0；
&-hacked {
opacity：1;
}
}
& __ back {
位置：绝对；
宽度：100％；
身高：100％；
背景大小：自动100％；
背景位置：居中；
背景重复：无；
转换：过滤$ time / 4 $ e-in-out;
}
& __ inner {
宽度：100％；
身高：100％；
头寸：绝对；
top：0；
还剩：0％；
background-size：自动133.3333％;
背景位置：居中；
背景重复：无；
transform：scale（0.75）;
转换：转换$ time / 4渐进，框阴影$ time / 4渐进，不透明$ time / 4步长；
不透明度：0；
盒子阴影：0 $ base $ base rgba（darken（$ accent，50％），0）;
填充：$ base * 5;
box-sizing：边框框；
}
& __ content {
职位：相对；
最高：50％；
宽度：自动；
转换：translateY（-50％）;
颜色：白色；
字体家族：$ heebo;
不透明度：0；
过渡：不透明度$ time / 4;
h1 {
字体粗细：900；
字体大小：$ base * 3;
行高：0.85；
底边保证金：$ base / 4;
指针事件：无；
文本阴影：0 $ base / 8 $ base / 4 rgba（darken（$ accent，50％），0.1）;
}
a {
光标：指针；
字体大小：$ base * 0.8;
字母间距：$ base * 0.1；
字体粗细：100;
职位：相对；
&：after {
content：’’;
显示：块；
宽度：$ base * 3；
背景：白色；
高度：1像素；
头寸：绝对；
最高：50％；还剩
：$ base * 2;
转换：translateY（-50％）;
transform-origin：0％50％;
转换：转换$ time / 2 $ e-in-out；
}
&：before {
content：’’;
border-top：1像素纯白；
border-right：1px纯白色；
显示：块；
宽度：$ base / 3；
高度：$ base / 3；
变换：translateX（0）平移Y（-50％）旋转（45deg）；
头寸：绝对；
字体家族：$ heebo;
字体粗细：100;
最高：50％；还剩下
：$ base * 5;
转换：转换$ time / 2 $ e-in-out；
}
&：hover {
&：after {
transform：scaleX（1.5）;
过渡：转换$ time * 2/3 $ e-in-out；
}
&：before {
transform：translateX（＃{$ base * 2}）translateY（-50％）rotation（45deg）;
过渡：转换$ time * 2/3 $ e-in-out；
}
}
}
}
& __ slide {
位置：绝对；剩余
：0；
高度：100vh；
宽度：100vw；
//转换：translatex（-100％）;
转换：转换$ time / 3 $ e-in-out；
转换延迟：$ time / 3;
指针事件：无；
z-index：0;
&-active {
transform：translatex（0％）;
z-index：2；
.slider__wrap {
transform：translateX（0）;
转换来源：100％50％；
不透明度：1；
动画：无；
}
.slider__back {
filter：blur（＃{$ base * 0.5}）;
转换：过滤$ time / 2 $ e-in-out;
transition-delay：$ time / 2！important;
}
.slider__inner {
transform：scale（0.80）;
盒子阴影：0 $ base / 3 $ base * 2 rgba（darken（$ accent，50％），0.2）;
指针事件：自动；
不透明度：1；
转换：转换$ time_back / 2 $ e-in-out，框阴影$ time_back / 2 $ ease-in-out，不透明度1ms步长；
转换延迟：$ time / 2;
}
.slider__content {
不透明度：1；
转换延迟：$ time * 3/4;
}
}
&：not（.slider__slide--active）.slider__wrap {
@keyframes hack {
0％{
转换：translateX（0）;
不透明度：1；
}
50％{
转换：translateX（-100vw）;
不透明度：1；
}
51％{
transform：translateX（-100vw）;
不透明度：0；
}
52％{
transform：translateX（100vw）;
不透明度：0；
}
100％{
转换：translateX（100vw）;
不透明度：1；
}
}
animation-name：hack;
动画持续时间：$ time / 2;
动画延迟：$ time / 4;
动画定时功能：$ ease-in-out;
}
&：nth-child（1）.slider__back，&：nth-child（1）.slider__inner {
background-image：url（https：/ /unsplash.it/1600/800/?image=931）;
//背景：#eee;
}
&：nth-child（2）.slider__back，&：nth-child（2）.slider__inner {
background-image：url（https://unsplash.it / 1600/800 /？image = 929）;
//背景：#aaa;
}
&：nth-child（3）.slider__back，&：nth-child（3）.slider__inner {
background-image：url（https://unsplash.it / 1600/800 /？image = 927）;
//背景：＃888;
}
}
}
.sig {
位置：固定；
底部：8像素；
：8px；
文字修饰：无；
font-size：12px;
字体粗细：100;
字体家族：sans-serif;
颜色：rgba（255,255,255,0.4）;
字母间距：2px；
z索引：9999；
}
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?
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.
解决方案
try below 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屋！
查看全文
