Question

我有一些使用<div id="fb-root"></div> <script>`enter code here` window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v3.2' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/lt_LT/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  <div class="fb-customerchat"; attribution=setup_tool page_id="0000000" theme_color="#0084ff" greeting_dialog_display="hide" > </div>和background-position的代码，以便在悬停文本时创建向右滑动的动画。

linear-gradient

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div:hover {
  background-position: 0%;
}

我想将其与为元素的第一个字母着色的能力结合起来，以便第一个字母着色，然后将鼠标悬停时其余的着色。

我使用了<div>Baz</div>伪元素，并且能够通过这种方式将颜色更改为紫色：

::first-letter

  div::first-letter {
    color: #8b73f6;
  }

但是，当我将它们组合在一起时，线性渐变总是胜出，并且位于我的颜色之上。我可以在div上更改<div>Foo</div>，直到它仅在第一个字母上显示颜色，然后解决方案仅适用于该特定字母，因为我没有使用等宽字体。

这是我尝试将它们组合在一起的方法：

background-position

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

顺便说一句，我正在使用样式组件将其合并。任何想法将不胜感激！

Answer 1

让它正常工作！我只需要停止使用<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>hexagon-tiles</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> li.hex-row { margin-top: -10vw; } li.hex-row:nth-child(2n) .hexagon { transform: translateX(50%) rotate(120deg); } ul#hexagonContainer { margin: 0; list-style: none; padding: 0; margin-top: 10vw; } .hexagon { width: 18vw; background: transparent; height: 9vw; display: inline-block; transform: rotate(120deg); overflow: hidden; visibility: hidden; margin-bottom: 7vw; position: relative; } li.hex-row { white-space: nowrap; //filter: drop-shadow(0.5vw 2vw 0.5vw black); } .hexagon .hex-inner { width: 100%; height: 100%; background: rebeccapurple; transform: rotate(-60deg); overflow: hidden; position: relative; } .hexagon .hex-img { width: 100%; height: 100%; transform: rotate(-60deg); visibility: visible; box-shadow: 1px 0px 0px 0px; background-color: #6B8E23; } .hexagon .hex-img:after { position: absolute; width: 100%; content: ''; z-index: 1; height: 100%; //background-image: url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg); background-position: center center; background-repeat: no-repeat; } .hex-img.hide { visibility: hidden; } .text{ position: absolute; //z-index: 1000; width: 100%; text-align: center; } </style> </head> <body> <div id="container"> <br/> <ul id="hexagonContainer">  <li class="hex-row"> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img"> <div class="text"> <p>My Overall<br/> Score</p> </div> </div> </div> </div> </li>  <li class="hex-row"> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img"> </div> </div> </div> <div class="hexagon"> <div class="hex-inner"> <div class="hex-img hide"> </div> </div> </div> </li>  </ul> </div> </body> </html>并使用普通的-webkit-text-fill-color。这个answer为我指明了正确的方向。

color

div {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

Answer 2

div:not(:hover)::first-letter {
    color: #8b73f6;
    background: linear-gradient(to right, red, green);
}

<div>Foo</div>

如何为第一个字母设置样式并应用此线性渐变动画？

2 个答案: