CSS是一種非常強大的前端編程語言，它可以幫助我們實現各種復雜的效果，比如矩形拉伸變色。下面我們來介紹一下CSS如何實現矩形拉伸變色。

.rect{
width: 200px;
height: 100px;
background-color: #ff0000;
position: relative;
overflow: hidden;
}
.rect:before{
content: '';
width: 20px;
height: 100%;
background-color: #ffffff;
position: absolute;
right: -10px;
top: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
}
.rect:hover:before{
transform: scaleX(1);
}

以上是實現矩形拉伸變色的CSS代碼，在代碼中，我們首先定義了一個寬為200px，高為100px，背景色為紅色的矩形，然后為其添加了:before偽元素，設定寬為20px，高為100%，背景色為白色，定位在矩形右側，并將transform-origin設為了100% 50%。這樣，當我們在:hover偽類中使用transform: scaleX(1)時，就能讓矩形的右側白色伸展開來。

實現矩形拉伸變色的CSS代碼非常簡單，但是效果非常驚艷，能夠為我們的頁面帶來很好的視覺效果。希望大家能夠掌握這個技巧，為自己的網站添加更多美觀的元素。