←首页

心有林夕
纠正之前的一个错误的观念。前几天觉得自己在细碎知识上花了太多篇幅,有点浪费时间。然而,吾生也有涯,而知也無涯,学习是一个积跬步致千里的过程,不可能一蹴而就。所以不应该觉得到了某个阶段就不去积累小知识点。把基础,简单的,打扎实先。

昨天在网易云音乐听着薛之谦的歌,觉得初学者的封面很帅,绚丽耀眼的配色加上背后同心圆黑碟。我喜欢一切美好的设计,所以打算在某公司待多一段时间,提升自己的审美能力。我相信看多了就会好的。

初学者

职业病驱动,让我想用拙劣的职业技能做点什么。其实之前就积累过一些。那么就做个小动画好了。

凹陷

瞅了一眼,貌似没什么难度。除了凹陷的地方一时还想不出如何实现。图片吗? 不行,太 low 了!我自己都受不了。用一个圆,然后设置 background 为 transparent? 好像可以! 可是半透明那部分怎么办?

花了点时间最终还是做出来了,为了让效果更突出,实现的结果跟最初的设想不一样,加上动画之后,是这样的:

效果

我的实现思路是:
画连个一模一样的同心圆,盖在上面的用 clip-path 进行裁切,然后放在相对应的位置,执行同样的动画。拆分出来就很明显了。

拆分

动效用到了 CSS3 Animation, steps, alternate等等。技术点不多,练练手还是不错的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.album__disc--cover {
//...
clip-path: circle($clip-size at $clip-x $clip-y);
}
//...
.animated {
//...
.album .image {
animation: coverImage $animation-time * 4 infinite steps(2);
}
.album__cover {
animation: cover $animation-time alternate infinite;
}
.album__disc {
animation: fadeInLeft $animation-time alternate infinite;
}
}

查看源码:

See the Pen Album by Helkyle (@HelKyle) on CodePen.

Codepen 出不来的话,可以点击这里看效果(有声音!)。

如需转载,请注明出处: http://w3ctrain.com/2016/11/30/linxi/

blog comments powered by Disqus