私たちのタスクは、HTMLとCSSのみでユニバーサルボタンを作成することでした。ユニバーサルボタンは幅が固定サイズではなく、デフォルトの状態ではアイコンのみを表示します。
ここにあるように見える-明白で簡単な解決策：
.button { transition: width ease-out 0.2s; width: 32px; } .button:hover { transition: width ease-out 0.2s; width: auto; }
ただし、この場合のCSS移行は機能しません。
以前に彼らが私のところに来て、「CSS3でこれを行うことは可能ですか？」と尋ねたとき、私はデザイナーとマネージャーを失望させ、cssプロパティの一種の不完全な移行を非難しました。
それでも、抜け穴が1つあることがわかりました。
width代わりに
width max-widthする必要があります：
.button { transition: width ease-out 0.2s; max-width: 32px; } .button:hover { transition: width ease-out 0.2s; max-width: 300px; }
height 「遊び回る」必要があるときも同じ話が当てはまります。
デモとソースコードは、htmlおよびcssタブにあります。
ご清聴ありがとうございました！