<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3过渡</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; transition:all 3s linear 2s; /** all： transition-property 3s : transition-duration linear: transition-timing-function 2s: transition-delay */ } div:hover{ background-color: red; font-size: 25px; transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍 这两个效果 一次性到位*/ /*transition属性的值： 01.transition-property:过渡的css属性的名称（color,font-size,background）等！ 想给多个属性设置过渡效果，使用all！ 02.transition-duration:过渡效果需要的时间！ 03.transition-timing-function:设置速度曲线！ ease：慢速开始，之后变快！ linear：匀速! ease-in:慢速开始！ ease-out:慢速结束！ 04.transition-delay:过度效果开始前需要等待的时间！默认 0s! */ } </style> </head> <body> <div> 大家辛苦了！ </div> </body> </html>