CSS悬浮动画

月亮很圆.

已于 2024-05-06 22:03:50 修改

阅读量312

点赞数 2

分类专栏： CSS 文章标签： css 前端

于 2024-05-06 21:49:54 首次发布

本文链接：https://blog.csdn.net/L_Y_J_21/article/details/138509442

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<button class="btn">悬浮动画</button>

 .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            width: 200px;
            height: 50px;
            background-color: transparent;
            border-radius: 5px;
            border: 2px solid powderblue;
            color: powderblue;
            font-weight: bold;
            transition: all 1s;
            overflow: hidden;
            &::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0;
                left: -30px;
                top: 0;
                background-color: powderblue;
                transform: skewX(45deg);
                transition: all 1s;
                z-index: -1;
            }
            &:hover {
                color: white;
                &::before {
                    width: 180%;
                }
            }
        }