推荐好书CSS 揭秘
获取链接: https://pan.baidu.com/s/1TAAZgVunaIqdDwRKhukVXA 密码: 27yp
用 css 实现一个饼状图
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 饼状图 </title>
- <style>
- .pie {
- position: relative;
- width: 300px;
- line-height: 300px;
- border-radius: 50%;
- background: yellowgreen;
- background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent;
- text-align: center;
- margin: 50px auto;
- }
- @keyframes spin {
- to { transform: rotate(.5turn); }
- }
- @keyframes bg {
- 50% { background: #655; }
- }
- .pie::before {
- content: '';
- position: absolute;
- top: 0;
- left: 50%;
- width: 50%;
- height: 100%;
- border-radius: 0 100% 100% 0 / 50%;
- background-color: inherit;
- transform-origin: left;
- animation: spin 1s linear infinite, bg 2s step-end infinite;
- animation-delay: inherit;
- }
- </style>
- </head>
- <body>
- <div class="pie">60s</div>
- </body>
- </html>
用 css 造一个旋转的风车
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>svg 绘制饼状图 </title>
- <style>
- .box{
- display: block;
- margin: 50px auto;
- }
- circle{
- fill: yellowgreen;
- stroke: #655;
- stroke-width: 30;
- stroke-dasharray: 21 10;
- animation: scroll 2s linear infinite;
- transform-origin: center;
- }
- @keyframes scroll {
- 0%{
- transform: rotate(0deg);
- }
- 0%{
- transform: rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <svg class="box" width="100" height="100">
- <circle r="30" cx="50" cy="50"></circle>
- </svg>
- </body>
- </html>
来源: http://www.qdfuns.com/article/24824/26a93fe3ec1385430146d662d6c63c35.html