-1
누구나 HTML과 CSS로 이것을 코딩하는 법을 알고 있습니까? HTML/CSS의 로고 티커
http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/
나는 양쪽에 그라데이션을 추가 찾고 있어요 내가 JS없이 그 일을 선호합니다.나는 codepen에 뭔가 왔어요하지만 난 문제의 몇 가지 있습니다
- 시세 때
$duration끝 새로 고침을. 나는 무한 루프를 원한다. - 나는 양쪽에 그라디언트를 추가하는 방법을 생각할 수 없습니다.
CSS
$duration: 30s;
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
width: 100%;
overflow: hidden;
height: 100px;
background-color: rgba(#fff, 0.0);
padding-left: 100%;
}
}
.ticker {
display: inline-block;
height: 100px;
line-height: 5rem;
white-space: nowrap;
padding-right: 80%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;
&__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
}
body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}
HTML (내가 코드의 작은 지식을 가지고, 디자이너 해요)
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
참고 * 원칙적으로 * 그것은 당신의 codepen처럼 작동 예 : 그렇습니다 : 잠시 후 다시 설정됩니다. HTML의 각 로고를 반복 패턴으로 몇 번 반복하고 전체 컨테이너를 왼쪽으로 슬라이드 한 다음 적시에 처음으로 다시 설정하여 멈추지 않는 것처럼 보입니다. 애니메이션의 길이와 컨테이너의 너비를 실험하면 같은 효과를 얻을 수 있습니다. 당신은 당신이 생각하는 것보다 더 가깝습니다. – cjl750
@ Pauli_D Hi Paulie, 답변 해 주셔서 감사합니다. 나는 이러한 요구 사항을 완전히 인식하지 못했습니다. 나는이 포스트를 편집했는데, 이것이 요구 사항을 충족시키기를 바랍니다. –
@ cjl750 감사합니다. 나는 그것이 가능할 것이라고 생각했다. 로고를 HTML로 복제하지 않고이 작업을 수행 할 수있는 방법이 있습니까? 난 가능한 한 작은 HTML을 가지고 노력하고있어. –