css3-ghostButton

时间：2016-06-17 12:23:30 阅读：248 评论：0 收藏：0 [点我收藏+]

标签：

幽灵按钮：

完全用CSS3来实现这个效果，主要用的属性有 transition transform box-sizing 等。

大家参考看看，原理很简单。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ghost</title>
    <link href="reset.css" rel="stylesheet">
    <link href="ghost.css" rel="stylesheet">
</head>
<body>
<div class="box">
    <div class="link link-mission">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line  line-top"></span>
            <span class="line  line-right"></span>
            <span class="line  line-bottom"></span>
            <span class="line  line-left"></span>
            MISSION
        </a>
    </div>

    <div class="link link-play">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line  line-top"></span>
            <span class="line  line-right"></span>
            <span class="line  line-bottom"></span>
            <span class="line  line-left"></span>
            PLAY
        </a>
    </div>

    <div class="link link-touch">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line  line-top"></span>
            <span class="line  line-right"></span>
            <span class="line  line-bottom"></span>
            <span class="line  line-left"></span>
            TOUCH
        </a>
    </div>
</div>
</body>
</html>

其中的rest.css是初始化一些样式的，大家可以用自己的重置样式。

ghost.css：

body {
    background-color: #333;
}

.box {
    margin: 50px auto;
    width: 1000px;
    height: 280px;

}

.box .link {
    display: inline-block;

    margin: 0 20px;
    width: 205px;
    height: 280px;
}

.box .link .icon {
    display: inline-block;

    width: 100%;
    height: 190px;

    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -o-transition: transform 0.5s;
}

.box .link .icon:hover {
    transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
}

.link-mission .icon {
    background: url("mission.png") no-repeat center;
}

.link-play .icon {
    background: url("play.png") no-repeat center;
}

.link-touch .icon {
    background: url("touch.png") no-repeat center;
}

.button {
    display: block;

    position: relative;

    margin: 0 auto;
    padding-left: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.8);
    width: 180px;
    height: 50px;

    font-family: "微软雅黑", Arial, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;

    background: url("allow.png") no-repeat 120px center;
    color: #2dcb70;

    transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
}

.button:hover {
    border: 2px solid rgba(255, 255, 255, 1);

    background: url("allow.png") no-repeat 140px center;

    box-shadow: 0 0 5px rgb(255, 255, 255);
}

/*线条共用属性*/
.button .line {
    position: absolute;

    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
}

/*从左飞入的线条*/

.button:hover .line-top {
    top: -2px;
    left: -2px;

    width: 180px;
    height: 2px;
    background: #fff;
}

.button .line-top {
    top: -2px;
    left: -100%;

    width: 0;
    height: 2px;
    background: #fff;
}

/*从右飞入的线条*/
.button:hover .line-bottom {
    bottom: -2px;
    right: -2px;

    width: 180px;
    height: 2px;
    background: #fff;
}

.button .line-bottom {
    bottom: -2px;
    right: -100%;

    width: 0;
    height: 2px;
    background: #fff;
}

/*从下飞入*/
.button:hover .line-left {
    left: -2px;
    bottom: -2px;

    width: 2px;
    height: 50px;
    background: #fff;
}

.button .line-left {
    left: -2px;
    bottom: -100%;

    width: 2px;
    height: 0;
    background: #fff;
}

/*从上飞入的线条*/
.button:hover .line-right {
    right: -2px;
    top: -2px;

    width: 2px;
    height: 50px;
    background: #fff;
}

.button .line-right {
    right: -2px;
    top: -100%;

    width: 2px;
    height: 0;
    background: #fff;
}

其中有四个素材图片，大家可以用自己的做一下尝试。

css3-ghostButton

标签：

原文地址：http://www.cnblogs.com/gavinzzh-firstday/p/5593586.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行