Heim > Fragen und Antworten > Hauptteil
Ich habe einen Text, dessen Größe ich auf 100 % der Browsergröße ändern möchte, wenn ich mit der Maus über die Schaltfläche fahre. Wie kann ich dafür sorgen, dass dieser Text in den Browser/Container passt?
Ich kenne die Verwendung von font size
,您可以执行类似 font-size:100vw
, aber die Animation der Schriftgröße ist sehr instabil, sodass ich diese Methode nicht verwenden kann.
http://jsfiddle.net/0n15mfyL/
Für diejenigen, die sich über Dithering wundern: Es fällt auf, wenn die Schriftart verkleinert wird: http://jsfiddle.net/rbk48upd/
P粉7295188062023-09-09 09:58:14
我正在考虑 requestAnimationFrame()
const hoverMe = document.querySelector('#hover-me') , animTextSizing = document.querySelector('#anim-text-sizing') , txtSizeStart = parseInt(window.getComputedStyle(animTextSizing).getPropertyValue('font-size')) ; let sizeLimit = 0, currentTxtSize = txtSizeStart ; hoverMe.onmouseover =_=> { sizeLimit = document.body.clientWidth; animGrow(); } hoverMe.onmouseout =_=> { sizeLimit = txtSizeStart; currentTxtSize++ animReduce(); } function animGrow() { animTextSizing.style['font-size'] = `${++currentTxtSize}px`; if ( animTextSizing.clientWidth < sizeLimit) requestAnimationFrame(animGrow); } function animReduce() { animTextSizing.style['font-size'] = `${--currentTxtSize}px`; if ( currentTxtSize > sizeLimit) requestAnimationFrame(animReduce); }
* { margin : 0; padding : 0; } #anim-text-sizing { font-size : 30px; width : fit-content; white-space : nowrap; background : #aabfe5; } #hover-me { position : fixed; background : red; color : white; top : 50%; left : 50%; padding : .5rem; cursor : zoom-in; }
<div id="hover-me">Hover me</div> <div id="anim-text-sizing"> Welcome to this Page </div>