【页面效果优化 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 的标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LEo的网络日志

markdown学习

4508
来自专栏vue学习

介绍-vuejs官网学习笔记

       前言:这两天把vuejs官方文档都看了一遍(路由的文档还没看),现在回过头来再结合英文文档重新看一遍 ,为的是学下英文,然后总结性的写一下。尽管...

2703
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。 当更新项目的...

2633
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

3237
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2907
来自专栏地方网络工作室的专栏

CSS 幽灵元素方案垂直居中注意事项

之前,我们转载了一篇博文CSS居中完全指南,在这篇文章中,提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。 这种方案非常适合解决一些图片布局,因此我也在项...

2035
来自专栏python3

html初识

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

3273
来自专栏前端真相

HTML

2178
来自专栏娱乐心理测试

Ios常用第三方动画框架(三)

2533
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.2K18

扫码关注云+社区

领取腾讯云代金券