css 애니매이션 질문 입니다. 채택완료
text ...
이런식으로 마침표 한개씩 찍히고 사라지는 효과가 잘 안되네요..
그 로딩 되고 있다는 느낌을 주는 효과 거든요..
<!-- html -->
<button type="button">Detecting <span></span></button>
Copy
#main .container.step02 .doc_area .click button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;
}
#main .container.step02 .doc_area .click button span:before {
content: "...";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#fff;
overflow: hidden;
animation: typing 3s steps(10) infinite;
}
@keyframes typing{
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
답변 2개
채택된 답변
+20 포인트
3년 전
Copy
button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;
}
button span:before {
content: "...";
top: 0;
left: 0;
width: 100%;
height: 100%;
color:black;
overflow: hidden;
animation: typing 3s steps(10) infinite;
}
@keyframes typing{
0% {
content: "...";
}
16% {
content: "..";
}
32% {
content: ".";
}
48% {
content: "";
}
64%{
content: ".";
}
80% {
content: "..";
}
100% {
content: "...";
}
}
Detecting
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
3년 전
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인