<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- transition:动画过渡效果属性 功能：使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标 点击、划过、获取焦点或对元素任何改变中触发，并圆滑的以动画效果改变css属性值。 可定义的属性有： transition-property：设置那些属性进行过渡，all：所有属性 transition-duration：完成过渡动画效果的时间，默认是0 transition-timing-function：设置动画的缓动效果，默认是ease（逐渐变慢）。 （其他常用值：ease-in，加速；ease-out，减速；ease-in-out，加速然后减速) transition-delay：设置动画开始的延迟时间，默认是0 示例： 使用transition，实现过渡动画。一个红色的正方形，当鼠标移入该区域后，红色正方形放大一倍，并且颜色变为灰色。鼠标移开，还原到初始状态。 --> <style> .box{ width: 100px; height: 100px; margin:50px auto; background-color: #f00; /* 为离开的动作也添加过渡效果 */ transition: all 1s ease-in 1s; } .box:hover{ height: 200px; width: 200px; border-radius: 50%; background-color: #666; /* transition-property:width,height,border-radius; transition-duration: 1s; transition-timing-function:ease-in; transition-delay:1s; */ transition: all 1s ease-in 1s; } </style> <body> <div class="box"></div> </body> </html>
Document