css關鍵幀轉換不能旋轉超過180度

我正在嘗試用css創建一個圓環圖。我觀察到它無法旋轉超過180度。我錯過了什麼。css關鍵幀轉換不能旋轉超過180度

這會阻止我顯示超過50％的任何數據的圓環圖。

@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(360deg); } 
    100% { -webkit-transform: rotate(360deg); } 
}

來源

2017-09-22 Naresh G

我會嘗試使用這種由CSS-技巧來達到你想要什麼： https://codepen.io/HugoGiraudel/pen/BHEwo

教程： https://css-tricks.com/css-pie-timer/

HTML：

<div class="wrapper"> 
    <div class="pie spinner"></div> 
    <div class="pie filler"></div> 
    <div class="mask"></div> 
</div>

CSS：

.wrapper { 
    position: relative; 
    margin: 40px auto; 
    background: white; 
} 

.wrapper, .wrapper * { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.wrapper { 
    width: 250px; 
    height: 250px; 
} 

.wrapper .pie { 
    width: 50%; 
    height: 100%; 
    transform-origin: 100% 50%; 
    position: absolute; 
    background: #08C; 
    border: 5px solid rgba(0,0,0,0.5); 
} 

.wrapper .spinner { 
    border-radius: 100% 0 0 100%/50% 0 0 50%; 
    z-index: 200; 
    border-right: none; 
    animation: rota 5s linear infinite; 
} 

.wrapper:hover .spinner, 
.wrapper:hover .filler, 
.wrapper:hover .mask { 
    animation-play-state: running; 
} 

.wrapper .filler { 
    border-radius: 0 100% 100% 0/0 50% 50% 0; 
    left: 50%; 
    opacity: 0; 
    z-index: 100; 
    animation: opa 5s steps(1, end) infinite reverse; 
    border-left: none; 
} 

.wrapper .mask { 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    opacity: 1; 
    z-index: 300; 
    animation: opa 5s steps(1, end) infinite; 
} 

@keyframes rota { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 
@keyframes opa { 
    0% { 
    opacity: 1; 
    } 
    50%, 100% { 
    opacity: 0; 
    } 
}

而且你也可以看看這個漂亮的教程： http://javabeat.net/pie-chart-css3-html/

記住我採取任何信用爲寫這個代碼，只是助人爲樂。

來源

2017-09-22 19:39:58 pegla

雖然它的工作原理我不清楚爲什麼，如果我直接給360度不工作的原因。我的實際意圖是用動態數據來構建甜甜圈圖表。此示例僅適用於一種顏色，因爲圓環圖有多種顏色，每種顏色都基於數據。例如：https://codepen.io/anon/pen/MEeWvj對於第一種顏色，它可以工作到180度。如果其中一人的數據超過50％，它不 –

我相信我提供的第二個鏈接應與甜甜圈圖一起工作。 – pegla

它不能幫助我，因爲它有餅圖和條形圖的解決方案。基本上我試圖更新https://codepen.io/anon/pen/EwgOqv爲什麼第一個雖然它有270度。它沒有按預期工作。小值可以很好地工作 –

-1

你只爲旋轉-RT是爲什麼它的旋轉半增加對旋轉-LT關鍵幀，從而獲得更好的結果

@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(360deg); } 
}

來源

2017-09-23 14:22:17

你缺少的旋轉-LT的關鍵幀添加關鍵幀。

另外，一些小的調整的角度：

body { 
 
    margin: 50px; 
 
} 
 
.spinner { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: #aaa; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
.spinner:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 0%; 
 
    height: 0%; 
 
    border-radius: 100%; 
 
    background: #fff; 
 
    top: 10%; 
 
    left: 10%; 
 
} 
 

 
.spinner span em { 
 
    background: #0e728e; 
 
    -webkit-animation-duration: 6s; 
 
} 
 

 

 
@-webkit-keyframes rotate-rt { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    50% { -webkit-transform: rotate(180deg); } 
 
    100% { -webkit-transform: rotate(180deg); } 
 
} 
 
@-webkit-keyframes rotate-lt { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    50% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(180deg); } 
 
} 
 

 

 
.spinner { 
 
    border-radius: 100%; 
 
    position: relative; 
 
} 
 

 
.spinner span { 
 
    width: 50%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 

 
.spinner span:first-child { 
 
    left: 0; 
 
} 
 

 
.spinner span:last-child { 
 
    left: 50%; 
 
} 
 

 
.spinner span em { 
 
    border-radius: 250px; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 

 
.spinner span:first-child em { 
 
    left: 100%; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    -webkit-animation-name: rotate-lt; 
 
    -webkit-transform-origin: 0 50%; 
 
} 
 

 
.spinner span:last-child em { 
 
    left: -100%; 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    -webkit-animation-name: rotate-rt; 
 
    -webkit-transform-origin: 100% 50%; 
 
}

<div class="spinner"> 
 
    <span><em></em></span> 
 
    <span><em></em></span> 
 
</div>

來源

2017-09-24 21:39:54 vals

css關鍵幀轉換不能旋轉超過180度

回答

相關問題