CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用CSS制作APPLE WATCH刻度盘动画效果

使用CSS制作APPLE WATCH刻度盘动画效果

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。

查看演示

下载:使用CSS制作APPLE WATCH刻度盘动画效果.zip


十几天前,苹果公司2015年春季发布会上宣布开始出售Apple Watch时间级售价。Apple Watch是苹果公司的一项新产品,一经发布就引起了人们的广泛关注。在这篇文章中,我们将使用CSS3来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。下面是这个效果的截图:

径向进度条


Apple Watch的刻度盘动画有三部分组成。么一个部分都是一个圆曲线组成的进度条。制作这种圆曲线是一件困难的事情,我们可以通过两个组件和一些定时动画来完成它。


我们先从一个半圆形的动画开讲解。



下面是它的HTML代码:


  1. <div class="dial-container">
  2.     <div class="wedge">
  3.     </div>
  4. </div>     
复制代码


我们通过border-radius属性将元素设置为半圆形,然后使用关键帧动画keyframe来使它动起来:


  1. .wedge {
  2.   animation: rotate 4s infinite linear;
  3.   border-radius: 0 4em 4em 0;
  4.   background: red;
  5.   width: 2em;
  6.   height: 4em;
  7.   transform-origin: 0% 50%;
  8. }
  9. @keyframes rotate {
  10.   100% {
  11.     transform: rotateZ(360deg);
  12.   }
  13. }         
复制代码


遮罩效果


你可以使用CSS的clip属性来制作遮罩效果,但是我们不推荐,因为该属性的跨浏览器兼容性不好。我们可以简单的在容器上使用overflow: hidden属性来制作遮罩效果。


看下面的效果,这里有两个元素在做动画。.dial-container是.wedge的一半宽,它的overflow属性设置为hidden。将它放置在容器的外部,可以制作一种遮罩效果。


  1. .dial-container {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 2em;
  5.     width: 2em;
  6.     height: 4em;
  7.     overflow: hidden;
  8. }      
复制代码


要制作则个圆的旋转效果,我们可以在制作一个半圆形动画,与刚才的半圆形组合在一起组成一个完整的圆形的旋转动画。



有了这两个半圆形的旋转动画,我们就可以组成一个完整的圆形动画,但是要注意第二个半圆形开始动画的时间。


完整圆形动画


下面是一个完整圆形的HTML代码。


  1. <div class="wrapper">
  2.   <div class="dial-container container1">
  3.     <div class="wedge"></div>
  4.   </div>
  5.   <div class="dial-container container2">
  6.     <div class="wedge"></div>
  7.   </div>
  8. </div>   
复制代码


两个半圆形被包裹在一个容器div.wrapper中。下面给它样式被使用关键帧动画是它们动起来。


  1. .wrapper {
  2.   position: absolute;
  3.   width: 4em;
  4.   height: 4em;
  5.   left: calc(50% - 2em);
  6. }
  7. .dial-container {
  8.   position: absolute;
  9.   top: 0;
  10.   bottom: 0;
  11.   overflow: hidden;
  12.   width: 2em;
  13. }
  14. .wedge {
  15.   background: red;
  16.   height: 4em;
  17.   width: 2em;
  18. }
  19. .container1 {
  20.   left: 2em;
  21. }
  22. .container1 .wedge {
  23.   animation: rotate-bg-1 4s infinite linear;
  24.   border-radius: 0 4em 4em 0;
  25.   left: 0;
  26.   transform-origin: 0 50%;
  27. }
  28. .container2 {
  29.   left: 0;
  30. }
  31. .container2 .wedge {
  32.   animation: rotate-bg-2 4s infinite linear;
  33.   border-radius: 4em 0 0 4em;
  34.   transform-origin: 2em 2em;
  35. }
  36. /* First animation moves 180 degrees in the first 2 seconds */
  37. @keyframes rotate-bg-1 {
  38.   50%, 100% {
  39.     transform: rotateZ(180deg);
  40.   }
  41. }
  42. /* Second animation moves 180 degrees in the last 2 seconds */
  43. @keyframes rotate-bg-2 {
  44.   0%, 50% {
  45.     transform: rotateZ(0);
  46.   }
  47.   100% {
  48.     transform: rotateZ(180deg);
  49.   }
  50. }              
复制代码


整个圆形旋转的动画效果如下:



进度条效果


接下来我们要在上面的基础上将它制作成圆形进度条的效果。我们可以在圆形的中间添加一个圆形的伪元素,修改伪元素的颜色和背景颜色一样,这样就可以造成一种一个圆形被挖空中间的效果。


  1. <div class="wrapper">
  2.   <div class="dial-container container1">
  3.     <div class="wedge"></div>
  4.   </div>
  5.   <div class="dial-container container2">
  6.     <div class="wedge"></div>
  7.   </div>
  8. </div>   
复制代码


  1. .wrapper::after {
  2.   content: "";
  3.   background: #fff;
  4.   border-radius: 50%;
  5.   width: 3em;
  6.   height: 3em;
  7.   position: absolute;
  8.   top: 0.5em;
  9.   left: 0.5em;
  10. }        
复制代码


下面是完成的进度条效果,已经和Apple Watch刻度盘有一点相像了。



起点和终点的圆角效果


仔细看Apple Watch的刻度盘动画,它的每个圆形进度条的开始和结束处是圆形的。为了制作这个效果,我们在圆形进度条的起点和终点处分别添加一个元素,并使起点处的元素按照进度条的方向和轨迹运动起来。HTML代码如下:


  1. <div class="wrapper">
  2.   <div class="dial-container container1">
  3.     <div class="wedge"></div>
  4.   </div>
  5.   <div class="dial-container container2">
  6.     <div class="wedge"></div>
  7.   </div>
  8.   <div class="marker start"></div>
  9.   <div class="marker end"></div>
  10. </div>      
复制代码


start元素是起点位置,end元素是终点元素。end元素炫耀按照圆形进度条的轨迹进行动画,我们对它添加关键帧动画:


  1. .marker {
  2.   background: green;
  3.   border-radius: 50%;
  4.   height: 0.5em;
  5.   width: 0.5em;
  6.   position: absolute;
  7.   top: 0;
  8.   left: calc(50% - 0.25em);
  9. }
  10. .end {
  11.   animation: rotate-marker 4s infinite linear;
  12.   transform-origin: 50% 2em;
  13. }
  14. @keyframes rotate-marker {
  15.   100% {
  16.     transform: rotateZ(360deg);
  17.   }
  18. }           
复制代码


为了让你看清楚整个动画过程,起点和终点的两个圆形di设置了绿色,并位于圆形进度条的中间。end元素通过rotate-marker关键帧动画进行运动,它的transform-origin被设置在容器的中心位置。这样,它就可以绕着圆形进行圆周运动。



现在,我们可以将起点和终点的圆形div的颜色修改为红色,使它们和圆形进度条融合在一起,这时,圆形进度条的首位就是圆角的了。另外,为了效果更好,我们可以添加一些贝兹曲线效果。



完整的APPLE WATCH刻度盘效果


完整的Apple Watch刻度盘效果有三个不同半径的圆形进度条组成,每一个圆形进度条的制作原理都是一样的。点击下面的链接查看完整的DEMO。


via:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503181542.html

【使用CSS制作APPLE WATCH刻度盘动画效果】相关文章

1. 使用CSS制作APPLE WATCH刻度盘动画效果

2. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

3. 利用CSS3制作动画效果

4. 利用CSS3制作动画效果

5. 使用CSS3的褪色和动画效果构建消息提醒框

6. 使用CSS3的step()生成的动画效果

7. 使用CSS3设计漂亮的动画效果3D大按钮

8. HTML5的绝活:巧用Canvas制作会动的时钟

9. 利用 CSS3 的褪色和动画效果制作消息提醒框

10. 如何用HTML5 Canvas制作子画面动画

本文来源:https://www.51html5.com/a1080.html

点击展开全部

﹝使用CSS制作APPLE WATCH刻度盘动画效果﹞相关内容

「使用CSS制作APPLE WATCH刻度盘动画效果」相关专题

其它栏目

也许您还喜欢