html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1" />
- <title > 鼠标 Hover 背景色上划效果 </title>
- <style>
- .bg-color {
- position: relative;
- display: block;
- width: 300px;
- }
- .bg-color>a {
- position: relative;
- display: inline-block;
- text-decoration: none;
- padding: 15px;
- color: rgba(0,0,0,0.8);
- text-align: center;
- }
- .bg-color>a::after {
- content: "";
- position: absolute;
- display: inline-block;
- left: 100%;
- right: 100%;
- bottom: 0px;
- height: 0px;
- background-color: #ccc;
- margin: 0 -100%;
- z-index: -1;
- -webkit-transition: all .2s ease-out;
- -moz-transition: all .2s ease-out;
- -o-transition: all .2s ease-out;
- -ms-transition: all .2s ease-out;
- transition: all .2s ease-out;
- }
- .bg-color>a:hover {
- color: rgba(255,255,255,1);
- -webkit-transition: all .5s ease-out;
- -moz-transition: all .5s ease-out;
- -o-transition: all .5s ease-out;
- -ms-transition: all .5s ease-out;
- transition: all .5s ease-out;
- }
- .bg-color>a:hover::after {
- height: 100%;
- opacity: 0.5;
- background-color: rgb(0,174,79);
- -webkit-transition: all 1.2s ease-out;
- -moz-transition: all 1.2s ease-out;
- -o-transition: all 1.2s ease-out;
- -ms-transition: all 1.2s ease-out;
- transition: all 1.2s ease-out;
- }
- </style>
- </head>
- <body>
- <div class="bg-color">
- <a href="#">CSS3 实现背景图片上滑动 </a>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/20635/b79d5c8dec02feae7072897175bf24a2.html