• 技术文章 >web前端 >css教程

    很实用!CSS实现在单击按钮时显示按下的动态效果

    藏色散人藏色散人2021-08-27 10:31:59原创241
    在上一篇《如何用css快速创建3点加载动画》中给大家介绍了如何用css创建3点加载动画效果,感兴趣的朋友可以去阅读了解一下~

    本文将给大家介绍在前端设计过程中非常实用的一个动态效果,就是在单击按钮时显示按下的动态效果,光说可能大家还不明白是什么效果,我们可以直接看一个动图:

    GIF 2021-8-27 星期五 上午 10-19-37.gif

    不过本文不仅会介绍实现这一种按下的动态效果,还会介绍另一种,继续往下看!

    第一种效果实现方法:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /* 为按钮添加一些基本样式 */
    
            .btn {
                text-decoration: none;
                border: none;
                padding: 12px 40px;
                font-size: 16px;
                background-color: green;
                color: #fff;
                border-radius: 5px;
                box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
                cursor: pointer;
                outline: none;
                transition: 0.2s all;
            }
            /* 在按钮处于活动状态时添加转换 */
    
            .btn:active {
                transform: scale(0.98);
                box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    
            }
        </style>
    </head>
    
    <body>
    
    <!-- 带有类'btn'的按钮 -->
    <button class="btn">Button</button>
    
    </body>
    </html>

    效果如下:

    GIF 2021-8-27 星期五 上午 10-19-37.gif

    注:

    transform 属性向元素应用 2D 或 3D 转换。

    使用CSS的transform属性在按钮处于活动状态时添加按下效果。CSS transform 属性允许我们缩放、旋转、移动和倾斜元素。

    第二种效果实现方法:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /* 向按钮添加基本样式 */
    
            .btn {
                padding: 15px 40px;
                font-size: 16px;
                text-align: center;
                cursor: pointer;
                outline: none;
                color: #fff;
                background-color: #ff311f;
                border: none;
                border-radius: 5px;
                box-shadow: box-shadow:
                7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            }
            /* “active”添加样式 */
    
            .btn:active {
                box-shadow: box-shadow:
                7px 6px 28px 1px rgba(0, 0, 0, 0.24);
                transform: translateY(4px);
            }
        </style>
    </head>
    
    <body>
    
    <button class="btn">点击我</button>
    </body>
    </html>

    效果如下:

    GIF 2021-8-27 星期五 上午 10-27-05.gif

    注:当active 伪类处于活动状态时,你可以使用其他方法在单击按钮时创建自己的效果。

    PHP中文网平台有非常多的视频教学资源,欢迎大家学习《css视频教程》!

    以上就是很实用!CSS实现在单击按钮时显示按下的动态效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:CSS
    上一篇:纯CSS3创建边框阴影向外扩散的动画特效 下一篇:利用CSS3创建实用的加载动画效果(两种)
    线上培训班

    相关文章推荐

    • html怎么设置图片按钮• html中按钮颜色怎么设置• 在CSS中怎么给按钮添加背景图片(详解及实例)• 手把手教你使用css制作一个圆角按钮效果(代码详解)• 手把手教你使用CSS3实现按钮悬停闪烁动态特效

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网