html 代码
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>CSS 练习记录 </title>
- <style>
- *{margin: 0;padding: 0; font-family: "微软雅黑";box-sizing: border-box;}
- ul,li{list-style: none;}
- a,b,i,em,strong,span{display: inline-block; text-decoration: none;list-style: none;font-style: normal;font-weight: normal;}
- a:hover{text-decoration: none!important;}
- h1,h2,h3,h4,h5,h6{font-weight: normal;}
- img{ border:0;display: inherit;}
- .fl{ float:left;}
- .fr{ float:right;}
- .clear{ clear:both;}
- body{position: relative; background: #f5f5f5;}
- @font-face { font-family: myFirstFont; src: url('DietDidot Italic.otf'); }
- /* 以上是公共的样式 */
- .circle_con{width: 500px; height: auto;padding: 50px 0;border: 1px solid #ddd;}
- .circle_con_list{width: 100px; height: 100px;position: relative; margin: 0 auto;}
- .progress_left{position: absolute;width: 50%; height: 100%;overflow: hidden;}
- .progress_right{position: absolute;right:0;width: 50%;height: 100%;overflow: hidden;}
- .progress_left_con{width: 100%; height: 100%; border: 2px solid #000;position: relative;
- border-top-right-radius: 50px; border-bottom-right-radius: 50px;right: -100%;
- border-left: none;transform-origin: center left;-webkit-animation: loading-1 1s linear forwards;-webkit-animation-delay: 2s;}
- .progress_right_con{width: 100%; height: 100%; border: 2px solid #000;
- border-top-left-radius: 50px; border-bottom-left-radius: 50px;margin-left: -100%;
- border-right: none;transform-origin: center right;-webkit-animation: loading 2s linear forwards;}
- .progress_number{position: absolute;top:0;width: 100%; height: 100%; line-height: 100px; text-align: center;}
- .progress_ball{width: 100%; height: 100%; border-radius: 100%; position: relative;
- -webkit-animation: ball 3s linear forwards;}
- .progress_ball:before{position: absolute;left:50%;top:-5px;content: ""; width: 10px; height: 10px; background: #f00; border-radius: 100%;
- }
- @keyframes loading {
- 0%{-webkit-transform: rotate(0deg);}
- 100%{-webkit-transform: rotate(180deg);}
- }
- @keyframes loading-1 {
- 0%{-webkit-transform: rotate(0deg);}
- 100%{-webkit-transform: rotate(100deg);}
- }
- @keyframes ball {
- 0%{-webkit-transform: rotate(0deg);}
- 100%{-webkit-transform: rotate(270deg);}
- }
- </style>
- </head>
- <body>
- <div class="circle_con">
- <div class="circle_con_list">
- <div class="progress_left">
- <span class="progress_left_con"></span>
- </div>
- <div class="progress_right">
- <span class="progress_right_con"></span>
- </div>
- <div class="progress_ball"></div>
- <div class="progress_number">80%</div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/47481/be69b4516db1ab2eb40517cfb9065736.html