昨晚进行网站微调整,删了一些冗余数据,图片修复,顺便将导航和侧栏标题h2 字体都改大了一号。
一般情况下很难看出和原来有什么区别。但字体太小一直看着不舒服。
原本主题就有缩略图的transition过渡效果。
css3,transition

transition允许CSS的属性值在一定的时间区间内平滑地过渡,这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

想给侧栏评论加点鼠标悬停效果,比如时下很兴的头像旋转,但想想还是加到缩略图上来比较酷。
 不但图片放大同时给图片旋转一个角度。代码如下:
 .img{
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s
}
.img:hover{
opacity:.9;
-moz-opacity:.9;
-webkit-transform:scale(1.3) rotate(-10deg);
-moz-transform:scale(1.3) rotate(-10deg);
transform:scale(1.3) rotate(-10deg)
}
 注意:为了不让图片在放大时溢出,要用overflow: hidden;在上一级的类中进行边界隐藏。
 其中scale(1.3)是指横纵方向各放大1.3倍,rotate(-10deg)是逆时针旋转10度,
 过渡时间为0.3秒。

效果可以参考本站首页鼠标悬停文章缩略图时的变化!