利用skew（）和scale()来实现一个炫酷的按钮

最新推荐文章于 2023-09-27 19:00:31 发布

品风 ₯ 未醉

最新推荐文章于 2023-09-27 19:00:31 发布

阅读量186

点赞数

分类专栏： js+html+css的小练习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_48342617/article/details/121037424

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS实现一个倾斜变形的炫酷按钮效果。通过设置元素的`skewX()`变换、缩放和过渡属性，当鼠标悬停在按钮上时，可以产生平滑的视觉变化。主要涉及的技术包括CSS的伪元素`::before`、过渡动画及盒模型调整。

摘要由CSDN通过智能技术生成

视频效果

炫酷按钮

思路： 大致实录就是将盒子里边的before倾斜变形，使其变成一个平行四边形的效果，然后将其缩小隐藏，在放大，添加过渡时间就会出现如图所示的效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷按钮</title>
    <style>
        /* 将body设置为视口的大小 */
        body{
            width: 100vw;
            height: 100vh;
            background-color:#2c3e50 ;
            /* 将main居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 为main加上边框 */
        main{
            border: 2px solid #d35400;
            width: 150px;
            height: 50px;
            /* 同样设置为弹性布局将div居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            position: relative;
            overflow: hidden;

        }

        /* 通过main里的before实现一个效果 */
        main::before{
            content: "";
            width: 0;
            height: 100%;
            position: absolute;
            background-color: brown;
            /* 将其环绕x轴倾斜45deg */
            transform: skewX(45deg);
            /* 设置层次 */
            z-index: -1;
            transition: 1s;
        }

        /* 当悬浮到main上面时将before显示出来 */
        main:hover:before{
            width: 150%;
        }
    </style>
</head>
<body>
    <main>
        <div>
            莞工杰仔
        </div>
    </main>
</body>
</html>

要掌握的知识点：

倾斜变形：skew()
缩放：scale()

品风 ₯ 未醉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用skew（）和scale()来实现一个炫酷的按钮

视频效果思路：大致实录就是将盒子里边的before倾斜变形，使其变成一个平行四边形的效果，然后将其缩小隐藏，在放大，添加过渡时间就会出现如图所示的效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫

专栏目录