特效button demo

最新推荐文章于 2022-12-08 17:02:36 发布

涛痕

最新推荐文章于 2022-12-08 17:02:36 发布

阅读量417

点赞数 2

分类专栏： demo 涛痕世界文章标签：实例 demo css html5 动画

本文链接：https://blog.csdn.net/iamcgt/article/details/72456287

版权

涛痕世界同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

demo

18 篇文章 0 订阅

订阅专栏

效果

这里写图片描述

思路

1.设置一个a标签

<a target="_blank" href="http://www.baidu.com">Moved</a>

2.设置伪元素before和after，并且宽度为0

 a:after {
            top: 0;
            left: 0;
        }

        a:before {
            top: 0;
            right: 0;
        }

3.设置hover

 a:hover:after,
        a:hover:before {
            width: 100%;
        }

4.设置动画

 transition: all 500ms;

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #FFF;
        }

        a {
            width: 300px;
            height: 100px;
            font-size: 50px;
            margin: auto;
            line-height: 100px;
            text-decoration: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            border: solid 1px black;
            text-align: center;
            font-family: Arial, sans-serif;
            text-transform: uppercase;
            color: #666;
            transition: all 500ms;
            z-index: 1;
        }

        a:after, a:before {
            display: block;
            background: #333;
            width: 0;
            height: 100px;
            content: "";
            position: absolute;
            transition: all 500ms;
            z-index: -1;
        }

        a:after {
            top: 0;
            left: 0;
        }

        a:before {
            top: 0;
            right: 0;
        }

        a:hover:after,
        a:hover:before {
            width: 100%;
        }
    </style>
</head>

<body>
<a target="_blank" href="http://www.baidu.com">Moved</a>
</body>
</html>