當我懸停我的圖示時，如何制作流暢的影片，從左到右過渡。我嘗試過渡，但沒有奏效。對不起，我的英語不好。
.menu-icon {
height: auto;
background-color: tomato;
padding: 10px;
fill: white;
border-radius: 100px;
}
.menu-icon:hover::after {
content: 'Po?etna';
font-size: 0.7em;
vertical-align: middle;
transition: 300ms;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<i class="fas fa-home fa-2x menu-icon"></i>
</body>
</html>uj5u.com熱心網友回復：
請檢查下面更新的 HTML 和 CSS：
.menu-icon {
height: auto;
background-color: tomato;
padding: 10px;
fill: white;
border-radius: 100px;
}
span {
display: inline-block;
vertical-align: middle;
width: 0;
overflow: hidden;
white-space: nowrap;
transition: width 300ms linear;
}
i:hover span {
width: 110px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<i class="fas fa-home fa-2x menu-icon"><span>Po?etna</span></i>
</body>
</html>uj5u.com熱心網友回復：
最好的方法是在子元素上使用translate。這樣，當您懸停時，它不會通過移動它來影響可懸停區域：
.logo span {
transition: all 0.3s ease;
transform: translateX(0);
transform-origin: left;
display: inline-block;
}
.logo:hover span {
transform: translateX(100);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393876.html