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

yld2017 2017-04-06 11:30:58

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





<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>

...全文

477 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-05-01

打赏
举报

引用 5 楼 yld2017 的回复:

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

那个是我试出来的，不是计算出来的

yld2017 2017-05-01

打赏
举报

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

yld2017 2017-04-24

打赏
举报

引用 1 楼 jslang 的回复:

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

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

yld2017 2017-04-24

打赏
举报

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 */

}

ghostkngiht 2017-04-07

打赏
举报

可以用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>

天际的海浪 2017-04-06