5

純粋なcssで次のgifを再作成しようとしています-

読み込み中の画像

ここの Css - http://codepen.io/anon/pen/FmCaL - (mo では webkit/chrome のみ)

前と後の疑似セレクターを使用して、欠けている円のチャンクを再作成しようとしていますが、角度を正しく取得できません。

それは可能ですか？より良いアプローチはありますか？

これまでご協力いただきありがとうございました。矢印を透明にする必要があることを指定する必要がありました。円の欠けた部分にベタ塗りができません。

4

2 に答える 2

7

単純にこうしたらどうですか？

デモ

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

説明: ここで行っているのは、:after疑似を使用して要素を絶対円に配置し、transformプロパティを使用して三角形を回転させることです。

デモ2（アニメーションあり）

div {
    border: 10px solid #000;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;    
    animation: spin 1s infinite linear;
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -12px; 
    content: " ";
    border-bottom: 12px solid #fff;
    border-right: 12px solid transparent;
    transform: rotate(10deg);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

私の提案: 質問を更新したときに、透明なガターが必要だとおっしゃいました.png。100 行の CSS を記述してブラウザー間の互換性を心配するよりも、画像を使用して回転させることをお勧めします。または、コメントでリンクを共有したので、CSS マスキングを使用できます。

于 2013-07-30T11:40:56.540 に答える
0

三角形が透明かどうか気にしない場合は、次のような提案をしてもらえますか。

デモ(Chrome と Firefox で動作)

.loading {
    display: inline-block;
    margin: 5em;
    border: 10px solid grey;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;     
}
.loading:before {
    content: '';
    display: block;
    border: 13px solid transparent;
    border-right-color: white;
    width: 20px;
    height: 0;
    border-radius: 50%;
    margin: -3px 0 0 -13px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(359deg); }}
@-moz-keyframes spin { 100% { -moz-transform: rotate(359deg); }}
@keyframes spin { 100% { transform: rotate(359deg); }}
于 2013-07-30T11:52:34.420 に答える