애니메이션 아이콘 글꼴 회전기

로딩 스피너 (OSX/iOS 스타일)의 모든 진드기를 나타 내기 위해 내 맞춤 아이콘 글꼴에 12 개의 글리프를 만들었습니다.애니메이션 아이콘 글꼴 회전기

마크 업이

<div class="spinner"> 
    <span class="c1">&#xf001</span> 
    ... 
    <span class="c12">&#xf012</span> 
</div>

같은 것이 여기에

.spinner { 
    font-family: "nvicons"; 
    font-size: 24px; 
    letter-spacing: -1em; 
    .c1 { 
    color: #eee; 
    } 

    ... 

    .c12 { 
    color: #222; 
    } 
}

지금 내가 틱 상형 문자,하지만 불행히도 color CSS 속성이 애니메이션 보이지 않을 경우 색상을 애니메이션을 원하는 CSS의 모습 이 경우에는 background이 도움이되지 않는 것 같습니다. 애니메이션이 매끄럽고 날카로 웠기 때문에 키 프레임을 사용하여 애니메이트하는 방법을 찾지 못했습니다.

CSS로 애니메이션을 적용 할 수 있습니까? 내가해야할 일은 색상을 주기적으로 순환시키는 것이고 JS를 피하고 싶습니다.

출처

2013-02-15 Erik Aigner

더 나은 해결책을 찾았습니다. 함께 쓰십시오. jsfiddle

.spinner { 
    position: relative; 
    font-family:"nvicons"; 
    font-size: 24px; 
    letter-spacing: -1em; 
    color: #eee; 
    text-rendering: optimizeSpeed; 
} 
.spinner > span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-animation: coloring 1s linear infinite; 
} 
.spinner .e1 { 
    -webkit-animation-delay: 0.0s; 
} 
.spinner .e2 { 
    -webkit-animation-delay: 0.08333s; 
} 
.spinner .e3 { 
    -webkit-animation-delay: 0.16667s; 
} 
.spinner .e4 { 
    -webkit-animation-delay: 0.25s; 
} 
.spinner .e5 { 
    -webkit-animation-delay: 0.33333s; 
} 
.spinner .e6 { 
    -webkit-animation-delay: 0.41667s; 
} 
.spinner .e7 { 
    -webkit-animation-delay: 0.5s; 
} 
.spinner .e8 { 
    -webkit-animation-delay: 0.58333s; 
} 
.spinner .e9 { 
    -webkit-animation-delay: 0.66667s; 
} 
.spinner .e10 { 
    -webkit-animation-delay: 0.75s; 
} 
.spinner .e11 { 
    -webkit-animation-delay: 0.83333s; 
} 
.spinner .e12 { 
    -webkit-animation-delay: 0.91667s; 
} 
@-webkit-keyframes coloring { 
    from { 
     color: #222; 
    } 
    to { 
     color: #eee; 
    } 
}

출처

2013-02-16 10:31:22

당신이해야 할 일은 인접한 조각들과 30도 간격을두고 한 지점을 중심으로 고정 된 거리에서 회 전자 아이콘을 12 번 위치시키는 것입니다. 그런 다음 첫 번째 조각 (12 시방 경)의 배경을 애니메이션을 시작하려는 세 번째로 어두운 색으로 변경하십시오. 그런 다음 설정된 시간이 지나면 세 번째로 어두운 색상을 배경으로 다음 작품으로 이동하십시오. 당신이 당신의 아이콘 글꼴을 제공 할 수 있다면, 나는 당신에게 그것으로 jsfiddle을 만들 것입니다.

출처

2013-02-16 00:09:31

마크 업/css없이 답을 모르겠습니다. 미리 회전 된 틱은 유니 코드 값'f001'에서'f012'라고 가정 할 수 있습니다. –

당신의 대답은 내가 말한 것과 정확히 일치합니다. –

코드를 게시해야합니다.) –

모든 요구 사항을 충족시키는 지 확실하지 않지만 시퀀스의 요소 색상을 변경하려고합니다.

애니메이션이 날카롭지 않고 매끄럽지 않다고 말하면 키 프레임을 사용하여 애니메이션을 만들 수 있습니다. 그 수,

@-webkit-keyframes colors { 
    0% {color: red;} 
    49% {color: red;} 
    50% {color: blue;} 
    100% {color: blue;}

} 파란색에 빨간색의 모든 변화는 49 %와 50 % 물론

사이에 있는지

주의 사항 : 당신은 다른 매우 가까운 복제 단계를 작성해야 당신이 원하는 단계의 수를 확장 할 수 있습니다; 단지 모든 재산을 두 번 말해야한다는 것입니다.

또한 실제로 색상이 바뀌고 있음을 알 수 있습니다. 데모 (만 웹킷) :

fiddle

새 응답 이제 당신이 원하는 것을 분명 것을

는 가장 좋은 방법은 것 중 하나가 :

example from one div web

통지 결국 회전을하는 것입니다 :

805,153,210 중간 단계 (원이 중간 위치에있을 것입니다 경우) 애니메이션이 단계로 이루어집니다 숨기려면 공급 업체 접두사와 과정의

animation: .85s ajax-loader-rotate steps(8) infinite;

이 모든 것을.

출처

2013-02-16 08:55:56 vals

애니메이션 아이콘 글꼴 회전기

답변

관련 문제