【页面效果优化 1】下划线与水波纹

现阶段页面体验和动态效果很被用户重视，由于之前都是面向对象编程，所以对于CSS动态效果有所忽略，现在要求越来越高，不得不面向CSS编程了，在实现页面动态效果的同时，并想记录下来以后搭建更多项目的时候快速复用，故开篇此类博客进行详细探究CSS动态效果。

1、ion-input下划线效果

效果展示.gif

1.1、Css属性

.input-text {
    position: relative;
    padding: 1%;
    font-size: 1.2rem;
    margin-bottom: 1%;
    text-decoration: none;
    color: #fff;
}
.input-text:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: #fff;
    transform: scale(0);
    transition: all 0.3s;
}
.flag:after {
    transform: scale(1);
}

1.2、HTML使用

 <ion-input (ionFocus)="flag=true" (ionBlur)="flag=false" [class.flag]="flag" class="input-text" placeholder="xxx">

1.3、技巧与细节

1.3.1、（ionFocus）与 （ionBlur）
根据ionic官方API，此两种监听方法共同封装到ion-input中，记录ion-input的状态，ionFocus即为输入框焦点获取之上，输入时的状态，ionBlur即为点击其他地方，软键盘退出的状态。

1.3.2、flag赋值
根据angular的API，[class.xxx] 这个xxx即为SCSS文件中自定义的“.xxx{}”属性，让它通过数据绑定来进行判断是否使用“.xxx{}”属性来覆盖原来的属性与还原。

1.3.3、transform:scale(1)
关键触发点，即通过[class.xxx]语法绑定使用其覆盖前面的transform:scale(0)来完成动画显示

1.3.4、:after
CSS伪元素，专门动态控制CSS显示的，与之对应的还有:before，可以通过不同的事件发生来控制插入更多属性，从而完成动画展示。

1.3.5、 transition:all 0.3s
transition为动画过渡效果，参见此处【点击浏览】，这里伸缩的渐变效果即为此属性控制。

---

2、cardView点击水波纹效果

演示效果.gif

由于录像软件问题，调试显示点击出现严重拖影现象，不过可以看出具体细节效果，点击的时候CSS绘制的渐变效果实际上并不是非常理想的圆弧，有点颗粒渐变，不过在正常显示的情况下，这个过程很快，一般肉眼看不到具体细节变化。

2.1、Css属性

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

2.2、HTML使用

<ion-card class="ripple">xxxxxxx</ion-card>

2.3、技巧与细节

2.3.1、background-image: radial-gradient(circle, #666 10%,transparent 10%)
这是个径向渐变的属性，圆形并且中心到外部的颜色依次为#666和透明色。

2.3.2、transition: transform .3s,opacity .5s
扩展变化与透明度变化，这里非常考验人的想象能力，即在扩展过程中，透明度也必须发生变化，双重变化形成了水波纹的效果。

2.3.3、:active
顾名思义，点击选中时候所可以发生的变化插值，将对应的属性进行插值给使用此class 的标签。