배경 이미지에만 줌아웃 애니메이션을 적용하고 싶은데 잘 안되네요..
관련링크
http://nauville.co.kr/
183회 연결
본문
메인 배경 이미지에 줌아웃 애니메이션을 적용하고 싶은데
글자들까지 줌아웃 애니메이션이 적용됩니다..
글자들은 그대로 두고 배경만 줌아웃되게 하고 싶은데 어떻게 해야될까요..?ㅠ
현재 적용된 코드는 요렇습니다..
.swiper-slide.xet-bg-cover{
animation: zoomOut1;
animation-duration: 7s;
-webkit-animation: zoomOut1 7s; /* Safari and Chrome */
}
@-webkit-keyframes zoomOut1 {
0% {
transform: scale(1.3, 1.3);
}
50% {
transform: scale(1, 1);
}
to {
transform: scale(1, 1);
}
}
답변 1
<style>
.swiper-slide.xet-bg-cover{
animation: zoomOut1;
animation-duration: 7s;
-webkit-animation: zoomOut1 7s; /* Safari and Chrome */
}
@keyframes zoomOut1 {
/*
0% {
transform: scale(1.3, 1.3);
}
50% {
transform: scale(1, 1);
}
to {
transform: scale(1, 1);
}
*/
0% {
background-size: 150% 150%;
}
100% {
background-size: 100% 100%;
}
}
.xet-bg-cover {
width: 90%;
height: 90%;
background-image: url(/files/attach/images/145/8a39287959bc321c48b8a89629bcffdf.jpg);
background-position: center;
background-size: 100% 100%;
}
</style>
<div class="swiper-slide xet-bg-cover">
123<br>
123<br>
123<br>
123<br>
</div>
와 너무 감사합니다 !
답변을 작성하시기 전에 로그인 해주세요.