10/7
2014
之前给本站的一些a链接设置了旋转效果(鼠标经过左侧a元素即可看到)，里面用到了一个属性：
transition:all .5s;
意即动画效果的过渡时间为0.5秒。
以前我很好奇一些网站的a标签在鼠标经过的时候会缓慢变色而不是立即变色，刚才忽然想起了这个属性，试了一试果然奏效，即使不是旋转变形这类CSS3的新属性也有效果。
后来想起更早之前还试验过一个鼠标经过的时候图片透明度缓变的效果，是用js做的。也用transition属性试验了一下，果然能够实现这个效果，想当初费了多大劲，我真想以头抢地啊。不过css的伪类没有鼠标离开的状态，无法实现透明度缓慢恢复到1，这算是个缺陷吧吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>测试过渡效果</title></head><body> <img src="http://www.saber.love/wp-content/uploads/2014/08/head.png" alt=""> <br> <a href="#" id="demo">saber酱可爱无敌</a> <style type="text/css"> a{font-size: 40px;color: #444;} a:hover{color: #1BB40E;transition:all .6s;} img:hover{opacity: 0.4;transition:all .5s;} </style></body></html> |
看看下面这个例子：
代码如下：
1 2 3 4 5 | <div class="css3at"></div> <style type="text/css"> .css3at{ width: 100px;height: 100px;border: 6px solid #F27B33; border-radius: 100px; margin: 0 auto;} .css3at:hover{width: 70px; height: 70px;transition:all .5s; } </style> |
