有关css的效果展示

css有关属性##

  • css特殊属性的运用*

cursor: pointer; 鼠标放到游动的位置成为手的样式
overflow:hidden;隐藏溢出
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);给图片加边框

transform动画特效:

text-transform: rotate(10deg);
照片墙效果旋转特效

-webkit-transform:rotate(10deg);
适应浏览器的效果


鼠标移到图片位置放大效果:

box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
transform:rotate(0deg) scale(1.20);
/* 兼容性问题 */
-webkit-transform:rotate(0deg) scale(1.20);
z-index: 2;

动画特效0.5秒进行展示:
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
posted @ 2016-03-04 17:59  花间草  阅读(190)  评论(0编辑  收藏  举报