CSS3实现Button按钮滑动效果

最新推荐文章于 2024-04-05 21:12:09 发布

讲台催眠师明哥

最新推荐文章于 2024-04-05 21:12:09 发布

阅读量1k

点赞数

文章标签： html 前端按钮滑动效果有趣的前端案例明哥山月记

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123563705

版权

效果图：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动按钮</title>
    <style>
        /*按钮居中*/
        html,
        body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:yellow;
        }

        /*设置按钮尺寸样式*/
        .box {
            width: 300px;
            height: 60px;
            border: 2px solid pink; /*边框属性*/
            text-align: center; /*文本对齐方式*/
            font-size: 30px;
            line-height: 60px;
            font-family: sans-serif; /*设置字体*/
        }

        /*按钮每个字母设置行内块元素，以便单独设置动效*/
        .box span {
            display: inline-block;
            color: blue;
        }

        /*规定父元素的子元素，奇数在上，偶数在下，交错显示*/
        .box span:nth-child(odd) {
            transform: translateY(-100%);
        }

        .box span:nth-child(even) {
            transform: translateY(100%);
        }

        /*伪元素增加每个字母增加一个副本*/
        .box span::before {
            content: attr(data-text);
            position: absolute;
            color: red;
        }

        /*让伪元素字母交错显示，位置与原始元素相对*/
        .box span:nth-child(odd):before {
            transform: translateY(100%);
        }
        .box span:nth-child(even)::before {
            transform: translateY(-100%);
        }

        /*为按钮增加鼠标滑过样式，设置缓动时间*/
        .box:hover span {
            transform: translateY(0);
        }

        .box span {
            transition: 0.5s;
        }

        /*隐藏容器外的内容*/
        .box {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
</div>
</body>
</html>

讲台催眠师明哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3实现Button按钮滑动效果

效果图：源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑动按钮</title> <style> /*按钮居中*/ html, body { height: 100%; display: fl
复制链接

扫一扫