首先，设置div的初始样式；为了看着方便清晰，body也给了样式。
<style>
body{
margin: 10px auto;
width: 800px;
height: 500px;
border: 1px solid red;
}
.tran_div {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<body>
<div class="tran_div"></div>
</body>初始样式；红色边框是body的边框。
使用前先了解一下：transition 属性是一个简写属性，用于设置四个单独的过渡属性：
- transition-property //设置过渡效果的CSS属性名 如width、height、background-color等等
- transition-duration //设置过渡效果完成的时间 秒(s)或者毫秒(ms) 如1s 表示过渡效果完成的时间为1秒
- transition-timing-function //设置过渡效果的速度曲线
- transition-delay //设置过渡效果开始的时间 如 1s 表示1秒后开始过渡效果
因为分别设置四个属性太麻烦，我们就使用transition设置就好了；
transition简写语法：
transition: property duration timing-function delay; //不需要的不填写即可
此时我们提出需求：在鼠标移入把蓝色方块时，其高变为300px；那么应该添加以下代码
.tran_div:hover {
height: 300px;
}但是此时的效果是
可以看到，没有任何的过渡，高直接变为300px；那么此时就是transition大显身手的时候了。在上面代码的基础上加入transition，代码改成了下面
.tran_div:hover {
height: 300px;
transition: height 1s linear 1s;
}此时的效果就如下，在鼠标移动到div上时，等待了一秒后开始有动作，将div的高变为300px；
那么transition: height 1s linear 1s;这段代码的意思是什么
height：即transition-property属性值。表示要改变的css属性名，因为我们要改变的是高所以写height,如果是要改变宽就写width，但是这个我们可以省略不写（transition: 1s linear 1s），效果是一样的；不写的时候默认为all，表示所有属性都会获得过渡效果，意思就是在:hover{}中设置哪些属性发生改变就全都发生改变。
第一个1s： 即transition-duration属性值。 表示过渡效果的执行时间为1秒（不包括最后一个参数transition-delay的等待时间）；如果需要 过渡效果，此项不能为空，为空时间为0，和不设置transition效果一致。
linear：即transition-timing-function属性值。表示速度曲线，如果光说比较难懂，可以使用浏览器的调试来查看和调节速度曲线。主要的值有linear、ease、ease-in、ease-out、ease-in-out以及使用cubic-bezier()来自定义，具体可参考 CSS3 transition-timing-function 属性
第二个1s：即transition-delay属性的值，表示1秒后开始过渡动画，在这里就是鼠标移动到div上1秒后开始过渡动画；如果不写或设置为0s，则表示立即开始；
同样的，如果想要宽变大，则height改为width即可。
.tran_div:hover {
width: 300px;
transition: width 1s linear 1s; /* 此行的width可以不写默认为all 效果相同 */
}或者是需要高宽都变的
.tran_div:hover {
width: 300px;
height: 300px;
transition: 1s linear 1s;
}
上面介绍的是一个方向上的，如果想让高向上变大该怎么做呢？
在代码中加入position属性，对div进行定位
.tran_div {
position: absolute;
bottom: 0px;
width: 50px;
height: 50px;
background-color: blue;
}
.tran_div:hover {
height: 300px;
width: 300px;
transition: 1s ease 1s;
}
动画效果如下，
我的理解是： 在设置了position的前提下
设置了top属性，高则会向下伸展；设置了left属性，宽则会向右；并且默认情况下设置了top=0和left=0；
设置了bottom属性,高则会向上伸展；设置了right属性，宽则会向左；
定位的位置和动画的方向没有关系，只和是设置了top、bottom、left、right中的哪个属性有关；
如：
.tran_div { position: absolute; top: 300px; left: 600px; width: 50px; height: 50px; background-color: blue; } .tran_div:hover { height: 300px; width: 300px; transition: 1s ease 1s; }
完全相反方向的则是
.tran_div {
position: absolute;
bottom: 0px;
right: 0px;
width: 50px;
height: 50px;
background-color: blue;
}
.tran_div:hover {
height: 300px;
width: 300px;
transition: 1s ease 1s;
}
在以上示例中，在鼠标离开后，都是瞬间恢复原来的状态，没有过度效果，我们也可以设置transition来展示过渡效果，在div的样式设置里如同在:hover中加入transition就可以了。
.tran_div {
width: 50px;
height: 50px;
background-color: blue;
transition: 1s ease 0s; //在这里添加transition属性 并设置动画时间、等待时间、速度曲线
}
.tran_div:hover {
height: 300px;
width: 300px;
transition: 1s ease 0s;
}效果如下；我的理解是：在div没有任何动作的时候使用transition属性设置的效果过渡到当前样式（同一个大括号内）
如果多几个div，定位到不通的位置则可以做成div边框动画的效果
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style type="text/css">
body{
margin: 200px auto;
width: 800px;
height: 500px;
border: 1px solid red;
position: relative;
}
.top_d, .right_d, .bottom_d, .left_d {
position: absolute;
background-color: blue;
}
.top_d {
height: 15px;
width: 0;
transition: 0.1s linear .3s
/* 因为边框的显示和消失要有顺序，所以每个过渡动画的等待时间不一样
比如上边框top_d，是最先显示的，所以在:hover的时候其等待时间是0，
过渡时间是0.1s，所以右边框则要等0.1s后再开始过渡动画；但是上边框
确实在最后才消失的，所以这里的等待时间是0.3s
*/
}
.right_d {
top: 0;
right: 0;
height: 0;
width: 15px;
transition: 0.1s linear .2s
/* transition 类似一个开关，在同一个div中只要设置一次就可以了，如此处，显示和消失隐藏的过渡效果时间相同，只是等待时间
不同，那么在此处设置一个transition即可，在不一样的是最后一个属性，即transition-delay属性
那么在下面的:hover中只需要设置一个transition-delay即可，其他像transition-property等可以不用再次设置。
*/
}
.bottom_d {
bottom: 0;
right: 0;
height: 15px;
width: 0;
transition: 0.1s linear .1s
}
.left_d {
bottom: 0;
left: 0;
height: 0;
width: 15px;
transition: 0.1s linear 0s
}
body:hover .top_d {
width: 800px;
transition-delay: 0s;
}
body:hover .right_d {
height: 500px;
transition-delay: .1s;
}
body:hover .bottom_d {
width: 800px;
transition-delay: .2s;
}
body:hover .left_d {
height: 500px;
transition-delay: .3s;
}
</style>
</head>
<body>
<div class="top_d"></div>
<div class="right_d"></div>
<div class="bottom_d"></div>
<div class="left_d"></div>
</body>
</html>效果图
这里有一个测试地址，可以去看看 地址
本文用的代码 地址
有时我们会用到鼠标移入时div放大的功能，这里也可以用transition进行优化视觉效果
下面是初始代码
<!DOCTYPE html>
<html>
<head>
<title>div中心放大</title>
<style type="text/css">
body {
margin: 0 auto;
width: 1000px;
background-color: #cfcfcf;
}
.hbody {
position: relative;
border: 1px solid red;
width: 900px;
height: 700px;
}
.hdiv, .hdiv1, .hdiv2, .hdiv3 {
position: absolute;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: #81d742;
}
.hdiv {
top: 160px;
left: 280px;
}
.hdiv1 {
top: 260px;
left: 380px;
}
.hdiv2 {
top: 360px;
left: 480px;
}
.hdiv3 {
top: 460px;
left: 580px;
}
.hdiv:hover, .hdiv1:hover, .hdiv2:hover, .hdiv3:hover {
/* 这里是实现变大变小的主要代码 */
height: 140px;
width: 140px;
margin: -20px;
}
</style>
</head>
<body>
<div class="hbody">
<div class="hdiv"></div>
<div class="hdiv1"></div>
<div class="hdiv2"></div>
<div class="hdiv3"></div>
</div>
</body>
</html>此时的效果，可以实现，但是： 1) 没有过渡，略显生硬； 2）div变大后，变大部分被遮挡
1.可以在样式表中加入transition；
.hdiv, .hdiv1, .hdiv2, .hdiv3 {
position: absolute;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: #81d742;
transition: .2s linear;
}
.hdiv:hover, .hdiv1:hover, .hdiv2:hover, .hdiv3:hover {
height: 140px;
width: 140px;
margin: -20px;
}效果
2）在:hover时加入属性z-index
.hdiv:hover, .hdiv1:hover, .hdiv2:hover, .hdiv3:hover {
height: 140px;
width: 140px;
margin: -20px;
z-index: 9999;
}效果
最终效果地址
结束。
扫一扫
1103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
