纯css实现苹果表盘动画_html/css_WEB-ITnose
随着苹果表的大量生产,我想,用CSS来实现拨号动画的时候到了。
在这篇文章中,我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。
Demo
这是最终效果如下:
See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.
拨号进度条
表的动画是由3个线条构成的,每个都是进度条。进度条两边带有圆角。我们将使用一点小技巧来实现。
我们先来画半个圆。HTML代码如下:
我们使用border-radius属性和keyframe来实现半月形状和旋转动画。
(图片为gif)
.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); }}遮罩
按照往常的做法,我可能会使用CSS3的clip属性。但是由于浏览器内核兼容性问题,我决定还是放弃。这里,我们简单使用overflow:hidden就够了。
这里使用了两个元素,dial-container的宽度只有wedge的一半,而且它设置了overflow为hidden,容器的位置在半圆的右边,并旋转wedge,这样就出现了扇形效果。
.dial-container { position: absolute; top: 0; left: 2em; width: 2em; height: 4em; overflow: hidden; }
为了画完整个圆,我们需要创建第二个wedge和第二个container,放在左边。
我使用了一个wrapper来给两个containers定位。
并使用下面css来处理它们的位置关系。
.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); }}
运行结果:
进度
下一步是让wedge变成进度条。我们可以使用伪类在中间画个圆圈遮盖掉。
.wrapper::after { content: ""; background: #fff; border-radius: 50%; width: 3em; height: 3em; position: absolute; top: 0.5em; left: 0.5em; }
现在看起来有点进度条的样子了。
边缘处理
苹果表动画看起来很柔和还跟它的圆角有关。要创建这样的圆角,在weget上用css属性时不行的。不过我们可以使用点小技巧。
start元素和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); }}
上面的css把end圆设成绿色。并把transform-origin设置成容器中点。
整合到一起
三个这样的进度条整合到一起,就生成苹果表的动画效果。酷吗?
See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.
推荐阅读
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
纯CSS实现面包屑式导航_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
CSS3动画实现loading加载图标_html/css_WEB-ITnose