css – 从句子到一个单词的过渡

我想要实现的是为元素宽度设置几个单词的宽度,这是在元素中心悬停单词的方式,其余部分顺利地超出边界.我还会在HTML中尽可能保持清晰,而不是使用固定像素数量的边距/宽度来定位元素.

我脑子里的一张非常糟糕的草图在这里：

* {
  transition: all 1.5s;
}

div {
  min-width: 150px;
  width: 30%;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
}

div:hover {
  background: white;
  word-spacing: 300px;
}

a:hover::after,a:hover::before {
  content: ' ';
}


悬停时的每个单词都应该居中(当其他单词消失时,可能不会出现那些“跳跃”现在可见).你有什么想法？我很确定我尝试使用字间距的方式是错误的.


最佳答案
问题是当增加单词间距时,文本会转到新行并创建这个跳转的东西.所以你可以添加white-space：nowrap,你也可以使用padding-left推送文本并将其放在中心：

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  Box-sizing: border-Box;
  white-space: nowrap;
}

div:hover {
  word-spacing: 80px;
  padding-left: 80px;
  background: white;
}

实际上,单词间距应用于div,因此您不能将鼠标悬停在单词上.在第一个单词上应用这种技术也更容易,因为第二个单词将被溢出隐藏,但我不确定如何使用单词间距对第二个单词做同样的操作.
这是关于如何在没有字间距的情况下如何做的另一个想法.我使用了一些填充动画和伪元素来隐藏第一个单词时悬停第二个单词.

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  Box-sizing: border-Box;
  white-space: nowrap;
}

.afirst,.asecond {
  position:relative;
  display: inline-block;
  transition: all 0.5s;
}

.afirst:hover {
  padding: 0 44%;
  background: white;
}
.asecond:hover {
  padding: 0 50% 0 0;
  background: white;
}
.asecond:hover::before {
  content:" ";
  position:absolute;
  left:-50%;
  width:50%;
  top:0;
  bottom:0;
  z-index:99;
  background:#fff;
}

我认为你可以通过使用：左边的元素和右边的元素之后隐藏其他所有内容来概括这个解决方案.
这是一个包含多个单词的示例(但没有正确地给出中心对齐,仍然需要改进)：

div {
  min-width: 150px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  Box-sizing: border-Box;
  white-space: nowrap;
}

.word {
  position: relative;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  background: white;
  padding: 0 40%;
}

.word:hover::before {
  content: " ";
  position: absolute;
  left: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

.word:hover::after {
  content: " ";
  position: absolute;
  right: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

另一种解决方案具有完美的居中效果,但动画效果较少,换句

div {
  position:relative;
  height: 25px;
  width:500px;
  margin:0 auto;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  Box-sizing: border-Box;
  white-space: nowrap;
}

.word {
  position: relative;
  z-index:9;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
  text-align:center;
  background: white;
  z-index:99;
}


 原文链接：/css/427000.html

css – 从句子到一个单词的过渡

猜你在找的CSS相关文章