【原创】小小的设计感:动画呈现的下划线

有些人觉得本站文章标题的动态下划线很赞,问我用的是什么JS代码或框架,其实这里没有任何js,直接用CSS实现,网上有很多方法,我这里用的我觉得是效果最好的那个。关键的地方在于,有人想到了这样一种有趣、而不讨厌的特效,然后又有人实现了。。

本文对这个小小的设计感做个记录

动态下划线 的灵感

针对需要动效的页面元素--这里是有链接的h2--,定义它的CSS代码如下:

h2 > a {  position: relative;  color: steelblue;  text-decoration: none;  padding-bottom: 5px;}
h2 > a:hover {  color: #00B4FF;}	
h2 > a:before {  content: "";  position: absolute;  width: 100%;  height: 2px;  bottom: 0;  left: 0;  background-color: #00B4FF;  visibility: hidden;  -webkit-transform: scaleX(0);  transform: scaleX(0);  -webkit-transition: all 0.3s ease-in-out 0s;  transition: all 0.3s ease-in-out 0s;}
h2 > a:hover:before {  visibility: visible;  -webkit-transform: scaleX(1);  transform: scaleX(1);}

这段小小的代码就带来了这个 动态下划线 的一个优雅的呈现

追根溯源

一向喜欢小而美的动效设计,这个小小的设计感觉得挺好的,就拿来主义了。

一点想法

动效一定要小,不要讨人厌。