写在前面
之前都是在学习 CSS2 的一些特性,今天硬着头皮尝试了一下 CSS3 的东西。没想到也有意外收获。就是 transition 这个属性,实现的效果令人赏心悦目,甚至比 flash 动画看着还舒服,也非常简单,几行代码的事。
在 CSS3 中,实现旋转效果需要使用到 transform 属性中的 rotate 属性,实现阴影效果需要使用 box-shadow 属性。如:
transform: rotate(10deg)
box-shadow: 2px 2px 2px rgba(125, 125, 125, 0.5)
复制代码
transform 中文意思为转换,它是一个复合属性,其中 rotate 表示旋转,其他一些属性如scale-尺寸放大缩小,skew 表示倾斜角度,translate表移动距离。
上例中, rotate(10deg) 表示顺时针旋转 90 度,如果是负的,就是逆时针旋转。 box-shadow 中第一个 2px 表示水平偏移,2px 是投影向右偏移 2px,第二个是垂直偏移,同样是向下偏移 2px。第三个参数表示模糊的大小,第四个参数为颜色值。
使用 transition 给单个图片添加悬停动画
刚才 transform 属性可以让图片发生旋转,例如可以配合伪元素 hover 让图片旋转。当这样的效果很生硬。可以配合 transition 让它实现悬停动画。
.pic{
display: block;
transform: rotate(10deg);
width: 256px;
margin: 60px 0 0;
padding: 10px 10px 15px;
text-align: center;
background: #fff;
border: 1px solid #bfbfbf;
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
transition: all 0.5s ease-in
}
.pic:hover {
transform: rotate(0deg);
}
复制代码
最关键的部分就是 transition: all 0.5s ease-in。表示的意思就是所有的属性都执行过渡效果,像角度啊,投影大小,边框色或是下面要讲到的比例啦等,执行时间为0.5秒,过渡动画类型为先慢后快。
旋转拉近动画效果
这里的使用更加酷炫了,鼠标经过图片,图片不仅旋转,而且图片的投影拉长,图片的比例变大,形成了从墙面浮起来的酷炫效果。
.pic {
display: block;
padding: 10px 10px 15px;
position: absolute;
text-align: center;
background: #FFFFFF;
border: 1px solid #bfbfbf;
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
transition: all 0.5s ease-in;
z-index: 1;
}
.pic:hover {
border-color: #9a9a9a;
box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
transform: rotate(0deg) scale(1.05);
z-index: 3;
}
复制代码
这里仅仅对 hover 做了改变,让 box-shadow 的阴影更长,scale(1.05) 表示大小为原来的 1.5 倍。这些都是以动画的形式显示的,于是就有了从墙面上浮起来的效果。 每张图片所在的 a 标签采用绝对定位,鼠标经过时改变 z-index 层级使其顶层显示。
最后的效果如下