배경 이미지에만 줌아웃 애니메이션을 적용하고 싶은데 잘 안되네요.. 채택완료
김윤한
1년 전
조회 1,482
http://nauville.co.kr/" rel="nofollow noreferrer noopener" target="_blank">http://nauville.co.kr/
메인 배경 이미지에 줌아웃 애니메이션을 적용하고 싶은데
글자들까지 줌아웃 애니메이션이 적용됩니다..
글자들은 그대로 두고 배경만 줌아웃되게 하고 싶은데 어떻게 해야될까요..?ㅠ
현재 적용된 코드는 요렇습니다..
.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개
채택된 답변
+20 포인트
1년 전
</p>
<p><style>
.swiper-slide.xet-bg-cover{
animation: zoomOut1;
animation-duration: 7s;
-webkit-animation: zoomOut1 7s; /* Safari and Chrome */
}</p>
<p>
@keyframes zoomOut1 {
/*
0% {
transform: scale(1.3, 1.3);
}</p>
<p> 50% {
transform: scale(1, 1);
}</p>
<p> to {
transform: scale(1, 1);
}
*/
0% {
background-size: 150% 150%;
}
100% {
background-size: 100% 100%;
}
}</p>
<p>.xet-bg-cover {
width: 90%;
height: 90%;
background-image: url(/files/attach/images/145/8a39287959bc321c48b8a89629bcffdf.jpg);
background-position: center;
background-size: 100% 100%;
}
</style></p>
<p>
<div class="swiper-slide xet-bg-cover">
123
123
123
123
</div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
김윤한
1년 전
와 너무 감사합니다 !
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인