时间戳

首页 > 解决方案 > 多个导航元素上的渐变文本

html - 多个导航元素上的渐变文本

问题描述

我正在尝试获得一个带有渐变的导航栏，该渐变贯穿所有项目，例如渐变导航

我已经使用了一些方法，background-clip: text;但这会导致问题，font-awesome我不知道如何设置顶部/底部边框以跟随文本的渐变。

另一种方法是我尝试在父元素上使用渐变背景并使用混合混合模式，但这会导致项目之间偶尔出现故障。混合混合模式的梯度故障

我的问题是，实现这种渐变导航的最佳方法是什么？

这是代码（background-clip: text;）

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.menu li {
  display: table-cell;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 32px 10px 30px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  text-decoration: none;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

并使用混合混合模式：

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 80px;
  background: #ffffff;
  display: flex;
}

.menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background: linear-gradient(90deg, #ff0066, #2850ff);
}

.menu ul {
  list-style: none;
  padding: 0;
}

.menu li {
  display: table-cell;
}

.menu li a {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 80px;
  display: inline;
  padding: 33px 10px;
  text-decoration: none;
  background-color: #ffffff;
  mix-blend-mode: screen;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li a:hover {
  color: #000000;
  padding: 30px 10px;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
     <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

标签： htmlcss

解决方案

你的第一种方法几乎很好。您需要使图标display:inline覆盖inline-block由 Font Awesome 设置的阻止背景技巧工作的设置。

对于线条颜色，您可以考虑border-image将相同的渐变应用于相同的元素。诀窍是在 上应用负边距li以重叠该渐变，并在悬停时重置边距以显示它。

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  height: 80px;
  background: #ffffff;
}

.menu {
  height: 100%;
  display:flex;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin:0;
  border-image-source:linear-gradient(90deg, #ff0066, #2850ff);
  border-image-slice:2 0;
  border-top:2px solid;
  border-bottom:2px solid;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
  display:flex;
  font-weight: 600;
  height: 100%;
  box-sizing:border-box;
}
li {
  display: flex;
  align-items: center;
  margin:-2px 0;
  border-top:2px solid white;
  border-bottom:2px solid white;
  transition: all 0.2s ease-in-out;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
  text-decoration: none;
}

.menu li:hover {
  margin:0 0;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
  display:inline;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

以上不适用于Safari，因此您可以尝试以下操作：

body {
  background: #161616;
  margin: 0;
  padding: 0;
}

.header {
  height: 80px;
  background: #ffffff;
}

.menu {
  height: 100%;
  display:flex;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin:0;
  border-image-source:linear-gradient(90deg, #ff0066, #2850ff);
  border-image-slice:2 0;
  border-top:2px solid;
  border-bottom:2px solid;
  background: linear-gradient(90deg, #ff0066, #2850ff);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 600;
  height: 100%;
  box-sizing:border-box;
}
li {
  height:calc(100% - 4px);
  float:left;
  margin:2px 0;
  outline:4px solid #fff;
  transition: all 0.2s ease-in-out;
}

.menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height:75px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
  text-decoration: none;
}

.menu li:hover {
  outline:0px solid #fff;
}

i.fa {
  font-size: 12px;
  padding-right: 5px;
  display:inline;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="header">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#"><i class="fa-search fa"></i>Search</a></li>
    </ul>
  </div>
</div>

推荐阅读