css3过渡动画 transition
Posted sogeisetsu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3过渡动画 transition相关的知识，希望对你有一定的参考价值。
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的预览界面
以上是关于css3过渡动画 transition的主要内容，如果未能解决你的问题，请参考以下文章