在有这样的动画效果，就是比值是根据后台数据计算出来的 ， 页面元素的大小都是用的 rem
但是旋转的时候 发现在某些手机上 在动画结束的时候就会 闪动一下 麻烦大家看一下 是不是我哪里写的不对呢
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no,email=no" name="format-detection" />
<title></title>
<script type="text/javascript">
var winW = document.documentElement.clientWidth;
var desW = 750;
var proportion = desW/100;/*比例*/
document.documentElement.style.fontSize = winW/proportion +"px";
if(winW>desW){
document.documentElement.style.fontSize = "100px";
}
</script>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style>
@media screen and (min-width: 750px) {
body{
width: 750px;
margin: 0 auto;
}
}
.roateBox{
width: 100%;
height: 100%;
}
.roateBox li{
width: 100%;
background-color: #ffffff;
margin-bottom: 20px;
position: relative;
}
.roateTop{
width: 4rem;
height: 2rem;
overflow: hidden;
margin: 0 auto;
}
.roateTop img{
width: 4rem;
height: 4rem;
transform: rotate(0deg);
}
.roateTop img.active{
transform: rotate(60deg);
transition: 1s;
-webkit-transform: rotate(180deg);
-webkit-transition: 1s;
}
.roateBg{
position: absolute;
width: 4rem;
height: 0.15rem;
left: 3rem ;
bottom: -0.01rem;
}
.roateBg img{
width: 100%;
height: 100%;
}
</style>
<script>
window.onload = function(){
var oImg = document.querySelectorAll(".test");
for(var i=0; i<oImg.length; i++){
oImg[i].setAttribute("class","active");
}
}
</script></head>
<body>
<ul class="roateBox">
<li>
<h1>测试</h1>
<div class="roateTop">
<img src="images/icon/399.png" alt="" class="test" id="test"/>
</div>
<div class="roatePoint"></div>
</li>
<li>
<h1>测试</h1>
<div class="roateTop">
<img src="images/icon/399.png" alt="" class="test" id="test"/>
<div class="roateBg"><img src="images/icon/399_bg.png" alt=""/></div>
</div>
<div class="roatePoint"></div>
</li>
<li>
<h1>测试</h1>
<div class="roateTop">
<img src="images/icon/399.png" alt="" class="test" id="test"/>
</div>
<div class="roatePoint"></div>
</li>
<li>
<h1>测试</h1>
<div class="roateTop">
<img src="images/icon/399.png" alt="" class="test" id="test"/>
</div>
<div class="roatePoint"></div>
</li>
<li></li>
</ul>
</body>
</html>