HTML

效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/style.css">
</head>
<body><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Tram</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul>
</body>
</html>

CSS

body{margin: 0; /*外边距*/padding: 0; /*内边距*/font-family: sans-serif; /*字体格式*/
}
ul{position: absolute; /*决对定位*/top: 50%; /*距上部*/left: 50%; /*距左部*/transform: translate(-50%,-50%); /*移动x,y相对于自身*/margin: 0;padding: 0;display: flex; /*弹性盒模型*/
}
ul li{list-style: none; /*列表样式*/
}
ul li a{position: relative;display: block; /*块模型*/padding: 10px 20px;margin: 20px 0;text-decoration: none; /*字体装饰*/text-transform: uppercase; /*字体大写*/color: #262626;font-weight: bold; /*字体加粗*/transition: .5s; /*过渡时间*/
}
ul li a:hover{color: #fff;
}
ul li a::before{ /*之后添加，此处为边框*/content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: scaleY(2.5); /*Y轴放大2.5倍*/border-top: 1px solid #000;border-bottom: 1px solid #000;opacity: 0; /*透明度*/transition: .5s;
}
ul li a:hover::before{ /*悬停时，边框显示*/transform: scaleY(1.5); /*放大到1.5倍*/opacity: 1;
}ul li a::after{ /*之后添加，a标签的背景*/content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: scale(0);background-color: #000;border-top: 1px solid #000;border-bottom: 1px solid #000;transition: .5s;z-index: -1; /*图层顺序*/
}
ul li a:hover::after{transform: scale(1);
}

HTML — 淡入淡出边框按钮相关推荐

【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮
C#使用GDI+制作背景颜色淡入淡出效果的按钮 2010-04-14 来自:CNBLOG 字体大小:[大中小] 摘要:本文介绍C#使用GDI+制作背景颜色淡入淡出效果的按钮,并提供完整的示例和 ...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
浅尝flutter中的动画（淡入淡出）
在移动端开发中,经常会有一些动画交互,比如淡入淡出,效果如图: 因为官方封装好了AnimatedOpacity Widget,开箱即用,所以我们用起来很方便,代码量很少,做少量配置即可,所以,全部代码 ...
【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
为什么80%的码农都做不了架构师?>>> 我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记. 本特效主要采用fa ...
php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码向上滚动代码带上下翻按钮滚动特效 body{ ...
原生javascript淡入淡出焦点图 + Jquery实现方法
淡入淡出焦点图效果类这里是缓动焦点图链接: JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery 焦点图实现思路: 原生JS的类的调用方式: var slider1 ...
Blend_技巧篇_淡入淡出
Blend_技巧篇_淡入淡出原文:Blend_技巧篇_淡入淡出版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010265681/article ...
Android开发笔记（十五）淡入淡出动画TransitionDrawable
说到淡入淡出动画,可能大家会想到补间动画里面的AlphaAnimation,不过这个深浅动画只能对透明度做渐变效果,也就是只能对一个图形做深浅的颜色变换.如果我们想要从A图片逐渐变为B图片,也就是要实 ...

HTML — 淡入淡出边框按钮

HTML — 淡入淡出边框按钮

效果

HTML

CSS

HTML — 淡入淡出边框按钮相关推荐

最新文章

热门文章