昨晚进行网站微调整,删了一些冗余数据,图片修复,顺便将导航和侧栏标题h2 字体都改大了一号。
一般情况下很难看出和原来有什么区别。但字体太小一直看着不舒服。
原本主题就有缩略图的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秒。
效果可以参考本站首页鼠标悬停文章缩略图时的变化!
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/3231.html
