淡入淡出边框按钮

最新推荐文章于 2022-04-13 20:24:49 发布

K.Dream

最新推荐文章于 2022-04-13 20:24:49 发布

阅读量399

点赞数 2

分类专栏： html css

原文链接：https://youtu.be/9t6j2UQx0Dc

版权

css 同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

84 篇文章 0 订阅

订阅专栏

淡入淡出边框按钮

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

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);
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

K.Dream

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
淡入淡出边框按钮

淡入淡出边框按钮教程地址：原文地址（YouTube）B站教程：原文转载（bilibili）两个视频的内容相同，第二个为转载效果图代码区以下代码为本人填写，转载请注明教程地址和本贴地址html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录