css 애니매이션 질문 입니다. 채택완료
웹프리죤
3년 전
조회 2,593
text ...
이런식으로 마침표 한개씩 찍히고 사라지는 효과가 잘 안되네요..
그 로딩 되고 있다는 느낌을 주는 효과 거든요..
</p>
<p>#main .container.step02 .doc_area .click button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;</p>
<p>}
#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;
}</p>
<p>@keyframes typing{
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
</p>
<p><!DOCTYPE html>
<html>
<body>
<style>
button span {
position:relative;
color:transparent;
min-width:11px;
white-space: nowrap;
}
button span:before {
content: "...";</p>
<p> 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: "...";
}
}
</style></p>
<p><button type="button">Detecting <span></span></button></p>
<p>
</body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인