一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
<table width=514 border=0 align="center" cellpadding=0 cellspacing=0><tr>
<td><div id=demo style="OVERFLOW: hiddenz-index: 3pxWIDTH: 514px">
<table align=left border=0>
<tr>
<td id=demo1><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<%
dim n1
n1=0
%>
<%while not rs.eof and n1<999
if rs("picurl")<>"" then
n1=n1+1
%>
<td><table border=0 align=center cellpadding=0 cellspacing=0><tr><td><table border=0 align=center cellpadding=2 cellspacing=2 bgcolor='#ffffff' style="border: 0px double #FFFFFF"><tr><td><table border=0 align=center cellpadding=3 cellspacing=2 bgcolor='#ffffff' style="border: 1px double #666666">
<tr>
<td align="center" valign="middle"><a href="shownews.asp?id=<%=rs("newsid")%>" target="_blank" title="<%=rs("title")%>"><img src='../jindian/<%=rs("picurl")%>' alt='点击查看详细' height="111" border="0"></a></td>
</tr>
</table></td></tr></table></td></tr><tr><td align="center"><% if len(rs("title"))>11 then %><%=mid(rs("title"),1,11)%>...<%else %><%=rs("title")%><%end if%></td></tr></table></td>
<td width=4></td>
<% end if
rs.movenext
wend
n1=0
rs.movefirst
%>
<%
while not rs.eof and n1<999
if rs("picurl")<>"" then
n1=n1+1
%>
<% end if
rs.movenext
wend
%>
</tr>
</table></td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed3=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script></td>
</tr>
</table>
<style type="text/css"><!--
body {
font-size: 9pt
color: #000000
}
a {
color: #0000FF
text-decoration: none
}
a:hover {
color: #FF0000
text-decoration: underline
}
-->
</style>
</head>
<body>
<div id="marquees"><a href="#">链接一</a><a href="#">链接二</a><a href="#">链接三</a><a href="#">链接四</a></div>
<div id="templayer" style="position:absoluteleft:0top:0visibility:hidden"></div>
<script language="JavaScript">marqueesWidth=200with(marquees){
style.height=0
style.width=marqueesWidth
style.overflowX="hidden"
style.overflowY="visible"
noWrap=true
onmouseover=new Function("stopscroll=true")
onmouseout=new Function("stopscroll=false")
}
preLeft=0currentLeft=0stopscroll=falsefunction init(){
templayer.innerHTML=""
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML
}
marquees.innerHTML+=templayer.innerHTML
setInterval("scrollLeft()",100)
}init()function scrollLeft(){
if(stopscroll==true) return
preLeft=marquees.scrollLeft
marquees.scrollLeft+=1
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1
}
}
</script>
</body>
