标签：inline 缩放 isp yellow near col back 行高 一个
对文字hover展现出特殊效果，可以采用调整元素css属性来完成，虽然只能实现一些简单的动作，精心组合之下却能够达到令人满意的结果。
1、字体变化：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> em:hover{ font-size: 2em; } strong:hover{ font-weight: normal; } span:hover{ color: blue; } </style> </head> <body> <em>悬浮变大</em><br> <strong>悬浮变细</strong><br> <span>悬浮变颜色</span> </body> </html>
结果如下：
悬浮变大
悬浮变细
悬浮变颜色
2、缩放和旋转：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ transition: all linear 2s;} em:hover{ display: inline-block; transform: scale(2); } span:hover{ display: inline-block; transform: rotate(360deg); } </style> </head> <body> <span>悬浮这里旋转</span> <em>悬浮这里放大</em> </body> </html>
结果如下：
悬浮这里旋转 悬浮这里放大
可以看大，这里的放大并不会向上面一样影响行高，更多的是一种投影效果。
3、改变背景和边框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .background{ width: 200px; height: 50px; } .background:hover{ background: yellowgreen; } .border{ width: 200px; height: 50px; border: 2px solid transparent; } .border:hover{ border: 2px solid black;} </style> </head> <body> <p class="background"> 悬浮这里出现背景色 </p> <p class="border"> 悬浮这里出现边框 </p> </body> </html>
结果如下：
悬浮这里出现背景色
悬浮这里出现边框
为不影响边框显示后位置的变化，所以先将边框设置为透明色，如果想要实现动态的效果，可以在不悬浮时不设边框，这样悬浮时文字就会有一个动态的过程。
标签：inline 缩放 isp yellow near col back 行高 一个
原文地址：http://www.cnblogs.com/zzmiaow/p/7669119.html
