hr:hover {
transform:scaleX(50.0);
}
懸停時的 CSS
hr
{
position: absolute;
transition: transform 1.5s ease-out;
width: 3%;
height: 3px;
background-color: white;
margin-left: 20%;
margin-top: 10%;
}
線的CSS
那么我可以縮放它只是為了水平向左移動嗎？現在，當我懸停時，它是雙向的。我可以在我的 HR 中添加一個班級名稱以便我可以有多個嗎？
好的，我修復了用 hr 呼叫類名的問題
.line
{
content: normal;
position: absolute;
transition: transform 1.5s ease-out;
width: 10%;
height: 5px;
background-color: white;
margin-left: 20%;
margin-top: 10%;
}
似乎仍然無法達到只剩下的規模。
uj5u.com熱心網友回復：
您應該能夠通過設定transform-origin屬性來控制縮放方向。
變換原點是計算變換值的起點，因此可以說，將點設定到最右邊會強制比例尺向左移動。
是的，您可以向 hr 元素添加一個類：
<hr class="divider" />
.divider:hover {
transform:scaleX(50.0);
}
.divider {
position: absolute;
transition: transform 1.5s ease-out;
width: 3%;
height: 3px;
background-color: white;
margin-left: 20%;
margin-top: 10%;
/*
Control the scale direction
by defining the origin:
*/
transform-origin: center right;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535492.html
上一篇：在影片情節中圍繞點繪制圓圈
下一篇：變換：rotateY只翻轉一側