css 画圆

标签：red   function   旋转   web   over   frame   range   高度   nbsp   

 1 简单圆形  

                  .circle {
     border-radius: 50%;
     width: 200px;
     height: 200px; 
     backround-color:green                                                                              /* 宽度和高度需要相等 */
    }

 2 渐变色圆形：

       @keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}</p> <p>/* 旋转，渐变色 */
#advanced {
width: 200px;
height: 200px;</p> <p> background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);</p> <p> animation-name: spin; 
animation-duration: 3s; /* 3 seconds */
animation-iteration-count: infinite; 
animation-timing-function: linear;
}

css 画圆

标签：red   function   旋转   web   over   frame   range   高度   nbsp   

原文地址：https://www.cnblogs.com/hezhilong/p/8176842.html