前端开发CSS效果实例_简单的按钮切换效果

web前端开发的实例|前端开发取色器工具|前端 如何团队开发?

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″
    />
    <title>怎样回答如何看待前端开发:css效果实例</title>
    <style>
        .content {
            padding: 2em 1em 5em;
            z-index: 1;
            max-width: 600px;
            margin: 0 auto;
        }
        .content p {
            margin: 1em 0;
            padding: 0 0 2em;
            font-size: 0.85em;
        }
        .box {
            padding: 4.5em 0;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .bg-3 {
            background-color: #ccc;
            color: #fff;
        }
        .button {
            float: left;
            min-width: 150px;
            max-width: 250px;
            display: block;
            margin: 3em;
            padding: 1em 3em;
            border: 2px solid #ccc;
            background: #000;
            color: inherit;
            vertical-align: middle;
            position: relative;
            z-index: 1;
            -webkit-backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
        }
        .button:focus {
            outline: none;
        }
        .button>span {
            vertical-align: middle;
            font-family: “Helvetica Neue”, Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;
        }
        .bg-3 .button {
            color: #fff;
            border-color: #fff;
            border-radius: 20px;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }
        .button–tamaya {
            overflow: hidden;
            color: #7986cb;
            min-width: 180px;
        }
        .button–tamaya.button–inverted {
            color: #37474f;
            border-color: #37474f;
        }
        .button–tamaya::before,
        .button–tamaya::after {
            content: attr(data-text);
            position: absolute;
            width: 100%;
            height: 52%;
            ;
            left: 0;
            background: #f66705;
            color: #fff;
            overflow: hidden;
            -webkit-transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        }
        .bttwo::before,
        .bttwo::after {
            background: #1a72d1;
        }
        .btthree::before,
        .btthree::after {
            background: #349e00;
        }
        .btfour::before,
        .btfour::after {
            background: #db1205;
        }
        .button–tamaya.button–inverted::before,
        .button–tamaya.button–inverted::after {
            background: #fff;
            color: #37474f;
        }
        .button–tamaya::before {
            top: 0;
            padding-top: 1em;
        }
        .button–tamaya::after {
            bottom: 0;
            line-height: 0;
        }
        .button–tamaya>span {
            display: block;
            -webkit-transform: scale3d(0.2, 0.2, 1);
            transform: scale3d(0.2, 0.2, 1);
            opacity: 0;
            -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
            transition: transform 0.3s, opacity 0.3s;
            -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        }
        .button–tamaya:hover::before {
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        .button–tamaya:hover::after {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        .button–tamaya:hover>span {
            opacity: 1;
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    </style>
</head>
<body>
    <section class=”content”>
        <div class=”box bg-3″>
            <button class=”button button–tamaya button–round-s button–text-thick button–border-thin” data-text=”界面1″>
                <span>界面1</span>
            </button>
            <button class=”button button–tamaya button–round-s button–text-thick button–border-thin bttwo” data-text=”界面2″>
                <span>界面2</span>
            </button>
            <button class=”button button–tamaya button–round-s button–text-thick button–border-thin btthree” data-text=”界面3″>
                <span>界面3</span>
            </button>
            <button class=”button button–tamaya button–round-s button–text-thick button–border-thin btfour” data-text=”界面4″>
                <span>界面4</span>
            </button>
        </div>
    </section>
    </div>
</body>
</html>
前端开发就业意向分析|web前端开发 主要就业岗位|web前端开发的岗位职责
» 本文来自:前端开发者 » 《前端开发CSS效果实例_简单的按钮切换效果》
» 本文链接地址:https://www.rokub.com/4116.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!