CSS3案例学习---幽灵按钮

最新推荐文章于 2020-09-11 08:42:00 发布

笑释一切

最新推荐文章于 2020-09-11 08:42:00 发布

阅读量582

点赞数

分类专栏：前端 --html 文章标签： css3

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

--html

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE htm;>
<html>
    <head>
        <style>

            body{
                background-color:red;
            }
            .content{
                background-color:blue;
                width:1000px;
                height:400px;
                margin:50px auto;
            }
            .content .boxOne{
                background-color:gray;
                width:205px;
                height:220px;
                float:left;
                margin:0px 55px;
            }
            .boxOne .icon{
                background-color:pink;
                width:115px;
                height:115px;
                display:block;
                margin:0px auto;
                transition:all 0.2s;

                -webkit-transition:all 0.2s;
                -o-transition:all 0.2s;
                -moz-transition:all 0.2s;
            }
            .boxOne .icon:hover{
                transform:scale(1.2) rotate(360deg);

                -webkit-transform:scale(1.2) rotate(360deg);
                -o-transform:scale(1.2) rotate(360deg);
                -moz-transform:scale(1.2) rotate(360deg);
            }
            .boxOne .clickBtn{
                background-color:url(/1.jpg) no-repeat 130px center;
                width:115px;
                height:45px;
                margin:0px auto;
                font-family:"微软雅黑";
                font-size:18px;
                font-weight:bolder;
                color:black;
                display:block;
                text-decoration:none;
                line-height:45px;
                border:1px solid #fff;
                position:relative;
                transition:all 0.2s;

                -webkit-transition:all 0.2s;
                -o-transition:all 0.2s;
                -moz-transition:all 0.2s;
            }
            .boxOne .clickBtn:hover{
                background-position:1140px center;
                border: 2px solid #fff;
            }
            .clickBtn .line-top{
                background-color:red;
                width:0px;
                height:2px;
                display:block;
                position:absolute;
                top:0px;
                left:-100%;
                transition:all 0.2s ease;

                -webkit-transition:all 0.2s ease;
                -o-transition:all 0.2s ease;
                -moz-transition:all 0.2s ease;
            }
            .clickBtn:hover .line-top{
                width:115px;
                left:0px;
            }
            .boxOne .line-right{
                background-color:red;
                width:2px;
                height:0px;
                display:block;
                position:absolute;
                right:0px;
                bottom:-100%;
                transition:all 0.2s ease;

                -webkit-transition:all 0.2s ease;
                -o-transition:all 0.2s ease;
                -moz-transition:all 0.2s ease;
            }
            .clickBtn:hover .line-right{
                height:45px;
                bottom:0px;
            }
            .boxOne .line-left{
                background-color:red;
                width:2px;
                height:0px;
                display:block;
                position:absolute;
                left:0px;
                top:-100%;
                transition:all 0.2s ease;

                -webkit-transition:all 0.2s ease;
                -o-transition:all 0.2s ease;
                -moz-transition:all 0.2s ease;
            }
            .clickBtn:hover .line-left{
                height:45px;
                top:0px;
            }
            .boxOne .line-bottom{
                background-color:red;
                width:0px;
                height:2px;
                display:block;
                position:absolute;
                bottom:0px;
                right:-100%;
                transition:all 0.2s ease;

                -webkit-transition:all 0.2s ease;
                -o-transition:all 0.2s ease;
                -moz-transition:all 0.2s ease;
            }
            .clickBtn:hover .line-bottom{
                width:115px;
                right:-2px;
            }
            }

        </style>
    </head>
    <body>
        <!--容器div-->
        <div class="content">
            <!--盒子div-->
            <div class="boxOne">
                <span class="icon">
                    123
                </span>
                <!--线条及线条包围盒子-->
                <a href="#" class="clickBtn"> 
                    <span class="line-top"></span>
                    <span class="line-right"></span>
                    <span class="line-bottom"></span>
                    <span class="line-left"></span>
                    MISSION1
                </a>
            </div>
            <div class="boxOne">
                <span class="icon">
                    456
                </span>
                <a href="#" class="clickBtn"> 
                    <span class="line-top"></span>
                    <span class="line-right"></span>
                    <span class="line-bottom"></span>
                    <span class="line-left"></span>
                    MISSION2
                </a>
            </div>
            <div class="boxOne">
                <span class="icon">
                    789
                </span>
                <a href="#" class="clickBtn"> 
                    <span class="line-top"></span>
                    <span class="line-right"></span>
                    <span class="line-bottom"></span>
                    <span class="line-left"></span>
                    MISSION3
                </a>
            </div>
        </div>
    </body>
</html>

笑释一切

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3案例学习---幽灵按钮

<!DOCTYPE htm;><html> <head> <style> body{ background-color:red; } .content{ background-color:blue; width
复制链接

扫一扫