一、实现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
规定是否应该轮流反向播放动画。
方法/步骤1touchonmobileiScroll下拉刷新…llll1llll2llll3llll4llll5llll6llll7llll8llll9llll10llll11llll12llll13llll14llll15llll16llll17llll18llll19llll20llll21llll22llll23llll24llll25llll26llll27llll28上拉加载…2前面的许多meta标签是移动端适配以及对iphone的优化引用的文件包括less.js和iscroll-probe.js引用less是因为习惯了less的开发，其实跟css没区别iscroll-probe是上拉下拉的版本，iscroll5有4个版本3less文件*{margin:0padding:0font-family:"MicrosoftYaHei"}body{background:#fff}header{position:absolutetop:0left:0width:100%height:40pxz-index:2background:#ffcc33line-height:40pxvertical-align:middletext-align:centerfont-size:16pxcolor:#fff}.wrapper{position:absolutez-index:1top:0left:0bottom:0width:100%background:#cccoverflow:hidden.scroller{position:absolutez-index:1width:100%transform:translateZ(0)user-select:nonetext-size-adjust:none.pullDown{width:100%height:40px//margin-top:-40pxline-height:40pxvertical-align:middletext-align:center}ul{list-style:nonewidth:100%text-align:leftli{padding:010pxheight:40pxline-height:40pxvertical-align:middlefont-size:14pxbackground:#fffborder-bottom:1pxsolid#ddd}}.pullUp{width:100%height:40pxline-height:40pxvertical-align:middletext-align:centermargin-bottom:-40px}}}//载入画面.spinner{display:nonewidth:60pxheight:60pxposition:absolutetop:50%left:50%margin-top:-30pxmargin-left:-30pxz-index:10background:rgba(0,0,0,0).double-bounce1,.double-bounce2{width:100%height:100%border-radius:50%background-color:#000opacity:0.6position:absolutetop:0left:0-webkit-animation:bounce2.0sinfiniteease-in-outanimation:bounce2.0sinfiniteease-in-out}.double-bounce2{-webkit-animation-delay:-1.0sanimation-delay:-1.0s}@-webkit-keyframesbounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframesbounce{0%,100%{transform:scale(0.0)-webkit-transform:scale(0.0)}50%{transform:scale(1.0)-webkit-transform:scale(1.0)}}}4spinner是一个css3写的载入动画详细请参考css3动画less文件请自己编译5js文件varmyScrollvarpullDownFlag,pullUpFlagvarpullDown,pullUpvarspinnerfunctionpositionJudge(){if(this.y>40){//判断下拉pullDown.innerHTML="放开刷新页面"pullDownFlag=1}elseif(this.y0}document.addEventListener('touchmove',function(e){e.preventDefault()},false)6document.addEventListener('touchmove',function(e){e.preventDefault()},false)是iScroll的初始化7myScroll.on('scroll',positionJudge)myScroll.on("scrollEnd",action)对开始拖动和拖动结束的监听，这是iScroll5的一个坑，positionJudge和action都是function，但是如果直接以function(){}的方式写在里面的话，调用会出问题，所以要单独写在外面8编译一下less文件，找到iScroll-probe.js文件，就可以运行尝试了
