CSS3:实现一个循序渐进的下划线和一个Material波纹按钮

这篇博客介绍了如何使用CSS3创建从无到有的渐进下划线效果以及Material Design风格的点击波纹按钮。通过结合过渡效果和CSS3属性,实现了视觉上的平滑变化。提供了代码示例,并总结了实现这两个效果的关键知识点。
摘要由CSDN通过智能技术生成

前言

两个效果,一个是从无到有循序渐进的下划线效果;一个是谷歌扁平化按钮点击填充效果–简单粗暴易上手

效果图

这里写图片描述

实现原理

下划线的很简单:就是before结合:hover,配合transition过渡来实现从无到有的渐进过程;为什么需要两个transtion过渡,因为我们要考虑脱离:hover状态,也需要渐进回收,这样看起来才比较舒适。

MD按钮(active): 这个效果是我看到我手机上(S7 EDGE)设置有这个效果,就突然想试试用CSS3能不能写; 这里涉及到的知识点有【居中,层级的先后,以及圆角的配合过渡】,相对上面,也就复杂一丢丢;

代码demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>循序渐进的下划线及MD按钮效果</title>
    <style type="text/css">
    /* 演示容器 */
    .wrapper {
    
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        max-width: 800px;
        height<
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crper

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值