css3实现苹果手表applewatch开机动画特效

css3-Apple_watch

 

html5+css3 实现一个苹果表拨号动画实例,

本文我们使用keyframe动画和一些小技巧来实现苹果标表盘进度条动画,效果还是比较炫的。

 

HTML

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<link rel="stylesheet" href="index.css" type="text/css" />

</head>

<body>

<section class="demo-container watch-container" id="demo-zj">
<article class="watch">
<div class="bg-image"></div>
<div class="screen">
<header>
<span class="title">Activity</span>
<span class="time">10:09</span>
</header>
<section class="dials">
<div class="dial move">
<div class="dial-background one"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="dial-container container2">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial exercise">
<div class="dial-background two"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial stand">
<div class="dial-background three"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
</section>
<section class="pips">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</article>
</section>

</body>
</html>

 

css比较多 我就不列出来了,大家点击下面查看演示效果,或者下载下来自己研究吧!:)