IOS 求一个demo 就是让一个指针转动，类似转盘那样的
RT,转盘是一张图片，指针也是一张图片，现在想要做到指针转动，像钟表、幸运转盘那样转动，之前没接触过，求推荐一个类似的demo给我看看
我去看了些别人写的旋转动画，然后自己也照猫画虎弄了个最简单的，发现转动方向不对......
嘿咻不破处
9 years, 6 months ago
Answers
临时写的，没写注释，但是基本上看应该能看得懂的吧，看不懂的再问我：
看效果的话，可以查看这个地址：
纯CSS3实现的秒针跳动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>纯CSS实现的手表</title>
<style>
@keyframes tik {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
to {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
}
@-moz-keyframes tik {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
to {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
}
@-webkit-keyframes tik {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
to {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
}
@-o-keyframes tik {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
to {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
}
#clock {
width: 200px;
height: 200px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 50%;
position: relative;
}
#pointer {
width: 10px;
height: 10px;
background: #e0e0e0;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-bottom: -5px;
animation: tik 60s;
-moz-animation: tik 60s;
-webkit-animation: tik 60s;
-o-animation: tik 60s;
}
#pointer:before {
content: "";
display: block;
height: 95px;
width: 2px;
background: #282828;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -1px;
}
</style>
</head>
<body>
<div id="clock">
<div id="pointer"></div>
</div>
</body>
</html>
自己在把DIV里面加上背景图片之类的就可以。
奔放D小蘑菇
answered 9 years, 6 months ago
http://www.cnblogs.com/mofish/archive/2013/01/24/2875516.html
兼容性很好。
======================================================
呃，没看到是IOS……题主当没看见这条吧……
精肛互撸娃
answered 9 years, 6 months ago