现阶段页面体验和动态效果很被用户重视，由于之前都是面向对象编程，所以对于CSS动态效果有所忽略，现在要求越来越高，不得不面向CSS编程了，在实现页面动态效果的同时，并想记录下来以后搭建更多项目的时候快速复用，故开篇此类博客进行详细探究CSS动态效果。
1、ion-input下划线效果
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点击水波纹效果
由于录像软件问题，调试显示点击出现严重拖影现象，不过可以看出具体细节效果，点击的时候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 的标签。
