1
아래 코드에서 알 수 있듯이 멋진 순환 진행 표시 줄이 있습니다. 그러나 몇 가지 질문이 있으며이를 수행하는 방법에 대해서는 약간의 손실이 있습니다 (이상적으로는 나는 주위 만곡 간다 분홍색 줄을 만들고 싶어하고 평평하지 )CSS SVG 경로 - 순환 진행 표시 줄 (작은 앰먼트)
- 어떤 JS를 사용하려면,이 가능할까요? 그것의 가장자리처럼. 그래서 그 대신에 | 시작과 끝에서 조금 닮았습니다.)
- 중간에 떨리는 원이 생기면 을 다시 시작하기 전에 애니메이션이 완료되면 1 초 동안 을 일시 중지 할 수 있습니까?
/* Load Progress Animation */
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
@keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
그게 사랑스러운 친구 고마워요! 단지 빠른 것, 그것이 성장하고 축소 할 때를 알 수 있습니다. 다시 성장하기 전에 잠시 멈출 수 있습니까? –
@JamesBrandon - 업데이트를 확인하십시오. 이게 네가 말하는거야? 나는 그것을 다시 업데이트했다. –
차이점을 볼 수 있을지 모르겠으니, 이론적으로는 grow/skrink (1 초 정지) 성장/축소 (1 초 정지) 등입니다. –