CSS3按钮效果

2021-10-23 13:24:06

277

来自codepen,http://codepen.io/PalashSharma20/pen/YWBAgN

知识点：屏幕居中、transform、transition、transition-delay

最重要的是idea

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { margin: 0; padding: 0; }
        body,
        html { height: ; min-height: ; }
        body { font-family: sans-serif; }
        .button { height: 200px; width: 400px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); display: table; cursor: pointer; background: #252525; transition: 0.333333333333333s all ease-in; color: #ff4c4c; }
            .button .border { background: #ff4c4c; position: absolute; transition: 1s all linear; }
                .button .border.o { height: 5px; width: 0; bottom: 0; left: 0; transition-delay: 1s; }
                .button .border.tw { bottom: 0; right: 0; width: 5px; height: 0; }
                .button .border.th { top: 0; right: 0; width: 0; height: 5px; transition-delay: 1s; }
                .button .border.f { top: 0; left: 0; width: 5px; height: 0; }
            .button:hover { background: #ff4c4c; color: #252525; transition-delay: 2s; }
                .button:hover .o,
                .button:hover .th { width: ; }
                .button:hover .tw,
                .button:hover .f { height: ; }
            .button span { display: table-cell; vertical-align: middle; font-size: 40px; text-align: center; letter-spacing: 13px; text-transform: uppercase; font-weight: 100; }
    </style>
</head>
<body>
    <div class="button">
        <span>hover me</span>
        <div class="border o"></div>
        <div class="border tw"></div>
        <div class="border th"></div>
        <div class="border f"></div>
    </div>
</body>
</html>

上一篇：使用jquery操作元素的css样式下一篇：Js点击触发Css3的动画Anima