對背景上文字可見的文字進行縮放和淡出效果

Question

我需要縮放和淡出文字，但文字必須在背景中以其實際尺寸顯示 。

Here is the fiddle link這是我迄今爲止所做的工作，但 不完美。

我使用了兩個單獨的標籤class='overlap'以獲得所需的效果。我想用一個標籤來做到這一點，而不是使用兩個帶有相同數據的標籤。如果這不能解決，有沒有我可以用來獲得這種效果的插件，這將是有幫助的。

Answer 1

你可以使用一個僞元素和CSS Attr()，然後切換標籤

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

.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; 
 
}

<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">