zoukankan      html  css  js  c++  java
  • css 按钮动画

    菜鸟教程(runoob.com)

    按钮动画 - 波纹效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    .button {
        position: relative;
        background-color: #4CAF50;
        border: none;
        font-size: 28px;
        color: #FFFFFF;
        padding: 20px;
         200px;
        text-align: center;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
    }
    
    .button:after {
        content: "";
        background: #90EE90;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px!important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s
    }
    
    .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s
    }
    </style>
    </head>
    <body>
    
    <h2>按钮动画 - 波纹效果</h2>
    
    <button class="button">Click Me</button>
    
    </body>
    </html>
    

      

  • 相关阅读:
    ORA-02290: 违反检查约束条件
    上传图片
    dart视频教程
    'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。
    .net js有数据 但是跳转不到操作页
    LAYUI layedit 富文本框内容的取值
    LAYUI select 下拉框得高度
    防止页面刷新
    Hadoop常用命令
    spark常用命令
  • 原文地址:https://www.cnblogs.com/wuguangwei/p/11263830.html
Copyright © 2011-2022 走看看