过渡比较常用，过渡是一个属性：transition
完整定义时有4个参数
transition：all 2s 3s（过渡延迟） linear（过渡方式，平常采用默认）
实际用两个参数就行
过渡的实现:
(1)必须满足两个状态
(2)必须能够触发两种状态的切换
. (a)通过hover只是触发状态切换的一种方式（本学期使用）
. (b)可以用JS代码来触发（下学期要学）
不是所有属性都能过渡（但，用的时候当成都能过渡——all的使用）不用记啥能过渡，啥不能。
凡是可以用数字化表示的都可以实现过渡。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition属性实现过渡</title>
<style>
.box{
width:200px;
height:200px;
background-color:pink;
transition:width 2s;/*宽度的缓动效果：2秒过渡完*/
/*transition:height 3s;两个不能这样写，后面的会覆盖前面的*/
transition:width 2s,height 3s,background-color 2s;/*这样才是对的，用逗号分隔开*/
/*文字居中*/
text-align:center;
line-height:200px;
font-size:24px;
color:#69F;
transition:all 2s;/*时间一样的话，这样写更好*/
}
.box:hover{ /*鼠标放上去后切换*/
width:600px;
height:400px;
text-align:center;
line-height:400px;
color:#6FC;
background-color:#F96;
border-radius:50%;
}
</style>
</head>
<body>
<div class="box">过渡效果演示</div>
</body>
</html>
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
