css3 过度时间 |css一起改变方框菱角代码

/* 设置过度时间 */
transition: property duration timing-function delay;
/* 属性 */
transition-property: none | all | propertyname1, propertyname2, ...;
/* 过度时间 */
transition-duration: time;
/* 过度函数 */
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
/* 延迟时间 */
transition-delay: time;

CSS3 过度时间是指在一个样式值改变时，通过一段时间实现平滑的过渡效果。常用于实现页面的动态效果，如鼠标悬停时颜色的渐变、图片的缩放等等。

上述代码展示了设置过度时间的语法格式。其中，transition属性可以用来简写所有的过渡属性：属性、过度时间、过度函数、延迟时间。具体解释如下：

/* 具体属性取值 */
/* 可以设置过渡的 CSS 属性。默认是 "all" 即所有属性都可过渡 */
transition-property: none | all | propertyname1, propertyname2, ...;
/* 过渡时间。默认是 0，没有过渡效果 */
transition-duration: time;
/* 时间函数。默认是 "ease" */
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
/* 过渡效果的延迟时间。默认是 0 */
transition-delay: time;

值得注意的是，属性值是可缩写的，如只写属性和过渡时间的过渡，可以简写为：

/* 简写 */
/* 过渡属性和时间 */
transition: property duration;

使用 CSS3 过度时间，可以让页面动态效果更加美观，如果有需要可以先实现静态效果，再用过度时间使其更加生动和有趣。