使用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代码:
- <div class="dial-container">
- <div class="wedge">
- </div>
- </div>
我们通过border-radius属性将元素设置为半圆形,然后使用关键帧动画keyframe来使它动起来:
- .wedge {
- animation: rotate 4s infinite linear;
- border-radius: 0 4em 4em 0;
- background: red;
- width: 2em;
- height: 4em;
- transform-origin: 0% 50%;
- }
- @keyframes rotate {
- 100% {
- transform: rotateZ(360deg);
- }
- }
遮罩效果
你可以使用CSS的clip属性来制作遮罩效果,但是我们不推荐,因为该属性的跨浏览器兼容性不好。我们可以简单的在容器上使用overflow: hidden属性来制作遮罩效果。
看下面的效果,这里有两个元素在做动画。.dial-container是.wedge的一半宽,它的overflow属性设置为hidden。将它放置在容器的外部,可以制作一种遮罩效果。
- .dial-container {
- position: absolute;
- top: 0;
- left: 2em;
- width: 2em;
- height: 4em;
- overflow: hidden;
- }
要制作则个圆的旋转效果,我们可以在制作一个半圆形动画,与刚才的半圆形组合在一起组成一个完整的圆形的旋转动画。
有了这两个半圆形的旋转动画,我们就可以组成一个完整的圆形动画,但是要注意第二个半圆形开始动画的时间。
完整圆形动画
下面是一个完整圆形的HTML代码。
- <div class="wrapper">
- <div class="dial-container container1">
- <div class="wedge"></div>
- </div>
- <div class="dial-container container2">
- <div class="wedge"></div>
- </div>
- </div>
两个半圆形被包裹在一个容器div.wrapper中。下面给它样式被使用关键帧动画是它们动起来。
- .wrapper {
- position: absolute;
- width: 4em;
- height: 4em;
- left: calc(50% - 2em);
- }
- .dial-container {
- position: absolute;
- top: 0;
- bottom: 0;
- overflow: hidden;
- width: 2em;
- }
- .wedge {
- background: red;
- height: 4em;
- width: 2em;
- }
- .container1 {
- left: 2em;
- }
- .container1 .wedge {
- animation: rotate-bg-1 4s infinite linear;
- border-radius: 0 4em 4em 0;
- left: 0;
- transform-origin: 0 50%;
- }
- .container2 {
- left: 0;
- }
- .container2 .wedge {
- animation: rotate-bg-2 4s infinite linear;
- border-radius: 4em 0 0 4em;
- transform-origin: 2em 2em;
- }
- /* First animation moves 180 degrees in the first 2 seconds */
- @keyframes rotate-bg-1 {
- 50%, 100% {
- transform: rotateZ(180deg);
- }
- }
- /* Second animation moves 180 degrees in the last 2 seconds */
- @keyframes rotate-bg-2 {
- 0%, 50% {
- transform: rotateZ(0);
- }
- 100% {
- transform: rotateZ(180deg);
- }
- }
整个圆形旋转的动画效果如下:
进度条效果
接下来我们要在上面的基础上将它制作成圆形进度条的效果。我们可以在圆形的中间添加一个圆形的伪元素,修改伪元素的颜色和背景颜色一样,这样就可以造成一种一个圆形被挖空中间的效果。
- <div class="wrapper">
- <div class="dial-container container1">
- <div class="wedge"></div>
- </div>
- <div class="dial-container container2">
- <div class="wedge"></div>
- </div>
- </div>
- .wrapper::after {
- content: "";
- background: #fff;
- border-radius: 50%;
- width: 3em;
- height: 3em;
- position: absolute;
- top: 0.5em;
- left: 0.5em;
- }
下面是完成的进度条效果,已经和Apple Watch刻度盘有一点相像了。
起点和终点的圆角效果
仔细看Apple Watch的刻度盘动画,它的每个圆形进度条的开始和结束处是圆形的。为了制作这个效果,我们在圆形进度条的起点和终点处分别添加一个元素,并使起点处的元素按照进度条的方向和轨迹运动起来。HTML代码如下:
- <div class="wrapper">
- <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>
start元素是起点位置,end元素是终点元素。end元素炫耀按照圆形进度条的轨迹进行动画,我们对它添加关键帧动画:
- .marker {
- background: green;
- border-radius: 50%;
- height: 0.5em;
- width: 0.5em;
- position: absolute;
- top: 0;
- left: calc(50% - 0.25em);
- }
- .end {
- animation: rotate-marker 4s infinite linear;
- transform-origin: 50% 2em;
- }
- @keyframes rotate-marker {
- 100% {
- transform: rotateZ(360deg);
- }
- }
为了让你看清楚整个动画过程,起点和终点的两个圆形di设置了绿色,并位于圆形进度条的中间。end元素通过rotate-marker关键帧动画进行运动,它的transform-origin被设置在容器的中心位置。这样,它就可以绕着圆形进行圆周运动。
现在,我们可以将起点和终点的圆形div的颜色修改为红色,使它们和圆形进度条融合在一起,这时,圆形进度条的首位就是圆角的了。另外,为了效果更好,我们可以添加一些贝兹曲线效果。
完整的APPLE WATCH刻度盘效果
完整的Apple Watch刻度盘效果有三个不同半径的圆形进度条组成,每一个圆形进度条的制作原理都是一样的。点击下面的链接查看完整的DEMO。
via:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503181542.html
【使用CSS制作APPLE WATCH刻度盘动画效果】相关文章
2. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
3. 利用CSS3制作动画效果
4. 利用CSS3制作动画效果
本文来源:https://www.51html5.com/a1080.html
﹝使用CSS制作APPLE WATCH刻度盘动画效果﹞相关内容
- CSS制作水平垂直居中对齐
- CSS制作面包屑
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 动感的图片标题动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
- CSS3动画效果-animate.css
- CSS制造出光泽一闪而过的图片效果
- 年度盘点 十大基于云计算的Web操作系统
- 用css3制作纸张效果