transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间
例如
这是下面代码的预览界面预览界面
<!DOCTYPE html> <html> <head> <style> div{ height: 200px; width: 100px; background-color: #cccccc; margin: 20px auto; transition: all 2s;/*先用transition指定时间*/ } /* 制定div的hover，也就是鼠标放在div上时div的变化 */ div:hover{ background-color: aliceblue; transform: scale(0.8) rotate(360deg); /* 这里指定一些需要transform的东西，比如scale、rotate、translate等 */ } </style> </head> <body> <div><p>点击发生变化</p></div> </body> </html>
学习链接
CSS3 常用四个动画（旋转、放大、旋转放大、移动）
css3过渡教程
CSS 简单的鼠标悬浮过渡效果
github链接
11.html的预览界面
来源：博客园
作者：sogeisetsu
链接：https://www.cnblogs.com/sogeisetsu/p/11626296.html