css3宽度改变动画 |css2属性选择器

下面是一个简单的CSS3宽度改变动画的例子：

.example{
width: 100px;
height: 50px;
background-color: #ccc;
transition: width 1s;
}
.example:hover{
width: 200px;
}

在这段代码中，.example是一个div元素的类名，设置了它的初始宽度为100px，高度为50px，背景色为#ccc。接着通过设置transition属性，告诉浏览器要对它的宽度属性进行1秒的过渡效果。当鼠标悬停在它上面的时候，通过设置:hover伪类，改变它的宽度为200px。

上面的例子中用到的transition属性是CSS3中新增的属性，用于指定元素从一种样式变为另一种样式时的过渡效果。它可以指定过渡的属性、过渡的时间、过渡类型（如线性、缓动等）等等。

除了transition属性外，CSS3中还有许多其他的过渡动画属性，比如animation和keyframes。其中animation属性可以让元素按照指定的动画序列进行连续的动画效果。

CSS3宽度改变动画是网页设计中不可或缺的一部分，通过它的使用可以让页面更加生动有趣、更具观赏性。因此，大家应该多多尝试使用这些动画效果，为用户带来更好的使用体验。