想让图中的这个白点沿着圆圈转动，请问如何实现？

想让图中的这个白点沿着圆圈转动，请问如何实现？

<style>
*{  
    margin:0px;  
    padding:0px;  
}  
.today_look {
    height: 150px;
background-color:#06F;
margin-left:auto;
margin-right:auto;
width:1190px;
}.today_look_l {
    background: rgba(0, 0, 0, 0) url("jinri.png") no-repeat scroll 50% 0;
    height: 150px;
    position: relative;
    width: 190px;
background-color:#00F;
}
.today_look_cir {
    animation: 30s linear 0s normal none infinite running rotate;
    color: #fff;
    font-size: 18px;
    height: 68px;
    left: 87px;
    line-height: 1px;
    position: absolute;
    top: 26px;
    width: 10px;

}.mt35 {
    margin-top: 35px;
}
.over {
    overflow: hidden;
}
.left {
    float: left;
}
.clear{
clear:both;
}
</style><div class="today_look over mt35">
<div class="today_look_l left">
     <p class="today_look_cir">这里是个小圆点</p>
    </div>
            
    <div id="today_look_r" class="today_look_r left">
        <a href="/goods-5520.html" target="_blank">
        <img src="9-1605111S150.jpg" width="250" height="150">
        </a>
        <a href="/goods-9321.html" target="_blank">
        <img src="tooopen_sy_125236381149.jpg" width="250" height="150">
        </a>
        <a href="/goods-9371.html" target="_blank">
        <img src="9-1605111S150.jpg" width="250" height="150">
        </a>
        <a href="/goods-9371.html" target="_blank">
        <img src="tooopen_sy_125236381149.jpg" width="250" height="150">
        </a>
        
    </div>
</div>

解决方案 »

  1.   

    http://blog.csdn.net/jslang/article/details/52711046
      

  2.   

    可以用css或者svg实现。css的例子网上挺多。
    下面是以前我用svg实现的一个类似的东西，仅供参考。
     <div id="aaa"></div>
            <script type="text/javascript">
                var process = function () {
                    this.radius = 50;
                    this.radiusInner = this.radius * .6;
                    this.angle = Math.PI;
                    this.show = function (percent) {
                        var sin = Math.sin(2 * Math.PI * percent);
                        var cos = Math.cos(2 * Math.PI * percent);
                        var x = this.radius + this.radius * sin;
                        var y = this.radius - this.radius * cos;
                        var x1 = this.radius + this.radiusInner * sin;
                        var y1 = this.radius - this.radiusInner * cos;
                        var largeArcFlag = percent > .5 ? 1 : 0;
                        var svg = '<svg width="' + (this.radius << 1) + '" height="' + (this.radius << 1) + '">'
                            + '<path d="M' + this.radius + ',0'
                            + ' A' + this.radius + ',' + this.radius + ' 0 ' + largeArcFlag + ',1 ' + x + ',' + y
                            + ' L' + x1 + ',' + y1
                            + ' A' + this.radiusInner + ',' + this.radiusInner + ' 1 ' + largeArcFlag + ',0 ' + this.radius + ',' + (this.radius - this.radiusInner) + ' z"'
                            + ' style="fill:#00ff00;fill-opacity: 1;"/>'
                            + '</svg>';
                        $('#aaa').html(svg);
                    }
                };
                function ac(p) {
                    window.console.log('-----------');
                    new process().show(p);
                }            var index = 1;
                window.setInterval(function () {
                    ac((index++ / 100) % .99999)
                }, 100);
            </script>
      

  3.   

    CSS3 @keyframes 规则定义和用法
    通过 @keyframes 规则，您能够创建动画。
    创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
    在动画过程中，您能够多次改变这套 CSS 样式。
    以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
    0% 是动画的开始时间，100% 动画的结束时间。
    为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
    注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。语法
    @keyframes animationname {keyframes-selector {css-styles;}}<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
    }@keyframes mymove
    {
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
    }@-moz-keyframes mymove /* Firefox */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
    }@-webkit-keyframes mymove /* Safari and Chrome */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
    }@-o-keyframes mymove /* Opera */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
    }
    </style>
    </head>
    <body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div></body>
    </html>CSS3 animation 属性
    定义和用法
    animation 属性是一个简写属性，用于设置六个动画属性：
    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction
    注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
    div
    {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }
      

  4.   


    博主，请问cubic-bezier(0.36,0,0.64,1)里面的值是怎么算出来的
      

  5.   

    求助cubic-bezier(0.36,0,0.64,1)怎么计算的