【HTML】純CSS+DIV實現動態餅狀圖代碼
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
CSS 動態餅狀圖屬于前端實例代碼，有關更多實例代碼大家可以查看。 分享一段代碼實例，它實現了動態餅狀圖下效果。 代碼實例如下： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.pipipi.net/" />
<title>前端教程網</title>
<style>
.pie {
width: 140px;
height: 140px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}
</style>
</head>
<body>
<div class="pie"></div>
</body>
</html>
該文章在 2023/7/26 11:56:34 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
