箱子阴影从右到左出现

时间：2016-10-24 02:30:04

标签： html css css3

我使用以下代码

.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: lowercase;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 0 10px;
  line-height: 110%;
  color: #000;
  text-decoration: none;
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  -webkit-transition: box-shadow ease-in-out 0.2s;
  -moz-transition: box-shadow ease-in-out 0.2s;
  transition: box-shadow ease-in-out 0.2s;
}
.header .menu-item a:hover,
.header .menu-item a:focus{
  color: #000;
  text-decoration: none;
  -webkit-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
  box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

到目前为止，这正是我想要的。除了因为我希望悬停效果从右到左显示。我怎么能用箱子阴影来做呢？

按照布局进行操作。

enter image description here

我打破了我的脑袋，但还没有得到任何东西

如果你有另一个解决方案，如果他们不使用图像，我将不胜感激。

非常感谢

3 个答案:

答案 0 :(得分：4)

使用可以使用:before和:after选择器实现此目的，无需使用框阴影。

.header .menu{
  background:blue;
  padding: 10px 0;
}
.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: capitalize;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 10px;
  line-height: 110%;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 7px;
  width: 0px;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.header .menu-item a:hover:before {
  width: 100%;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

答案 1 :(得分：1)

可选。如果你没有找到使用box-shadow的解决方案

我之前只使用过伪元素，并在元素中加入了一些效果。

.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: lowercase;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 0 10px;
  line-height: 110%;
  color: #000;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 7px;
  width: 0px;
  background: black;
  transition: all 0.3s ease-in-out;
}

.header .menu-item a:hover:before {
  width: 100%;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

希望它对你有所帮助。干杯：）

答案 2 :(得分：1)

线下左右： 

.header .menu{
  background:blue;
  padding: 10px 0;
}
.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: capitalize;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 10px;
  line-height: 110%;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 7px;
  width: 0px;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header .menu-item a:hover:before {
  width: 100%;
  background: #fff;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

更多转换：

在线下到底： 

.header .menu{
  background:blue;
  padding: 10px 0;
}
.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: capitalize;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 10px;
  line-height: 110%;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 0;
  width: 100%;
  background: transparent;
  transition: height .5s ease, background-color .5s ease;
}

.header .menu-item a:hover:before {
  height: 7px;
  background: #fff;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

在线左右： 

.header .menu{
  background:blue;
  padding: 10px 0;
}
.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: capitalize;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 10px;
  line-height: 110%;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  height: 7px;
  bottom: 0;
  width: 0px;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header .menu-item a:hover:before {
  width: 100%;
  background: #fff;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

UNDERLINE MIDDLE OUT： 

.header .menu{
  background:blue;
  padding: 10px 0;
}
.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: capitalize;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 10px;
  line-height: 110%;
  color: #fff;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:after {
  content: '';
  display: block;
  margin: auto;
  height: 7px;
  width: 0px;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header .menu-item a:hover:after {
  width: 100%;
  background: #fff;
}
<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

此答案的来源

http://bradsknutson.com/blog/css-sliding-underline/

相关问题
最新问题