分享一个隐藏链接的样式

news2024/11/17 19:41:33

先上效果图：
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏的链接按钮</title>
    <style>
        .trapdoor {
            -webkit-transform: translateZ(0px);
            -webkit-font-smoothing: antialiased;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -25px;
            width: 200px;
            height: 50px;
            box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 0, 0.3), inset 7px 0px 12px -8px rgba(0, 0, 0, 0.3);
            background: rgba(0, 0, 0, 0.3);
            -webkit-transition: background 400ms ease-in-out;
            -moz-transition: background 400ms ease-in-out;
            -ms-transition: background 400ms ease-in-out;
            -o-transition: background 400ms ease-in-out;
            transition: background 400ms ease-in-out;
        }
        .trapdoor:hover {
            background: #fff;
        }
        .trapdoor:hover .door {
            box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.4);
            -webkit-transform: scale(1.08);
            -moz-transform: scale(1.08);
            -ms-transform: scale(1.08);
            -o-transform: scale(1.08);
            transform: scale(1.08);
        }
        .trapdoor:hover .top {
            top: -50%;
        }
        .trapdoor:hover .bottom {
            top: 100%;
        }
        .trapdoor .twitter-follow-button {
            margin-left: -77px;
            position: absolute !important;
            margin-top: -14px;
            left: 50%;
            top: 50%;
        }

        .top {
            top: 0%;
            left: 0;
        }
        .top:before {
            top: 5px;
        }

        .bottom {
            top: 50%;
            left: 0px;
        }
        .bottom:before {
            top: -20px;
        }

        .door {
            -webkit-transition: top 400ms, box-shadow 200ms, -webkit-transform 300ms;
            -moz-transition: top 400ms, box-shadow 200ms, -moz-transform 300ms;
            -ms-transition: top 400ms, box-shadow 200ms, -ms-transform 300ms;
            -o-transition: top 400ms, box-shadow 200ms, -o-transform 300ms;
            transition: top 400ms, box-shadow 200ms, transform 300ms;
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -ms-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
            background-color: #fff;
            position: absolute;
            overflow: hidden;
            width: 100%;
            z-index: 2;
            height: 50%;
        }
        .door:before {
            font-family: 'tweet', sans-serif;
            position: absolute;
            margin-left: -20px;
            font-size: 35px;
            display: block;
            color: #4099FF;
            content: "\2764";
            width: 0;
            height: 20px;
            left: 52%;
        }

        @font-face {
            font-family: 'tweet';
            src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/277/tweet.woff") format("woff");
            font-weight: normal;
            font-style: normal;
        }
        a {
            color: #b3b3b4;
            text-decoration: none;
        }

    </style>
</head>
<body>
<div class="trapdoor">
    <div class="top door">
    </div>
    <div class="bottom door">
    </div>
    <a href="https://blog.csdn.net/qq_35241329?type=blog" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="false">TiMi先生</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</body>
</html>