标签:动画

前端

SVG 线条动画入门

8

鑫神 发布于 2018-10-26

通常我们说的 Web 动画,包含了三大类。 CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。  ...

阅读(326)评论(0)赞 (0)

前端

CSS shapes(CSS图形)

23

鑫神 发布于 2018-10-26

CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outside shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,...

阅读(214)评论(0)赞 (0)

前端

纯 CSS 实现波浪效果!

13

鑫神 发布于 2018-10-26

一直以来,使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。 当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪...

阅读(210)评论(0)赞 (0)

前端

CSS 动画技巧与细节

16

鑫神 发布于 2018-10-26

  正负旋转相消 嗯。名字起的很奇怪,好像数学概念一样。 (写完文章才发现这里应该叫正反旋转相消,图都截完了,大家心里清楚就好) 在动画中,旋转是非常常用的属性, ? 1 2 3 {   transform: rotate(90deg); } 那旋转有一些什么高级点的技...

阅读(242)评论(0)赞 (0)

前端

CSS 滤镜技巧与细节

15

鑫神 发布于 2018-10-26

本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN — filter 了解下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { ...

阅读(255)评论(0)赞 (0)

前端

妙用 scale 与 transfrom-origin,精准控制动画方向

6

鑫神 发布于 2018-10-26

如何将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。 描述很难理解,看看原本的效果: 难点所在 第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。...

阅读(272)评论(0)赞 (0)