按钮点击水波效果

Material Design设计按钮点击效果比较酷炫,每次点击按钮都会产生一次水波涟漪的效果。

可以css和canvas来实现这种效果。

css实现

伪类(pseudo-class)和伪元素(peseudo-element)

伪类

  • 1
    > * ```:after

链接定义样式

  • : 鼠标滑过元素上方时的展现效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    > * ```:active``` : 鼠标单击元素时展现效果
    > * ```:visited``` : 已经单击过的链接
    > * ```:link``` : 未访问、未滑过、未点击过的链接标签的样式

    #### 段落样式
    > * ```:first-letter``` : 首字母
    > * ```:first-line``` : 首行

    #### 设置元素

    > button元素在没有点击或者鼠标滑过时设置按钮样式,同时设置hover和active的样式效果

    ```css
    .button {
    text-decoration:none;
    user-select:none;
    position: relative;
    display: block;
    margin: 100px auto;
    width:120px;
    height:50px;
    line-height:50px;
    text-align:center;
    border-radius:25px;
    border: none;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    background-color: #ff8300;
    box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
    overflow: hidden;
    }

    .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
    }

    .button:active {
    box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
    color: #ffca8c;
    background-color: #f07b00;
    transform: translateY(0);
    }

添加水波效果

参考

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×