Question

我需要缩放和淡出文本，但文本仍然必须可见   在背景中的实际大小。
     到目前为止我已经做过的{p> Here is the fiddle link但是有效   不完美。

我使用两个单独的标签class='overlap'来获得我想要的效果。我想用一个标签做这个，而不是使用两个带有相同数据的标签。如果这不能解决，是否有任何插件可以用来获得这种效果，这将是有帮助的。

Answer 1

您可以使用伪元素和CSS Attr()，然后在标签

上切换类

＆＃13;

$(document).ready(function() {
  $(".temp").change(function() {
    $('.zoom').attr('data-text', $('.temp').val());
    $(".zoom").addClass('flash');
    setTimeout(function() {
      $(".zoom").removeClass('flash');
    }, 1000);
  });
});

＆＃13;

.zoom {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
  margin-bottom: 10px;
}
.zoom::before {
  content: attr(data-text);
}
.zoom::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}
.zoom.flash::after {
  content: attr(data-text);
  transition: 1s ease;
  transform: scale(2);
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class='zoom'></label>

<label>Enter some text and remove focus</label>
<input class='temp' type="text">

＆＃13;

缩放和淡出文本效果，文本在背景上可见

1 个答案: