派琪网络传媒-高端网站建设与网络营销服务商
专注更高品质上海网站建设
与网络推广营销服务商

照片的CSS悬停效果

时间: 2014-08-18 分类: 网站设计 浏览次数: 496
分享到:

上海网站建设 上海网站设计(www.paiky.net) 目前最受欢迎的课程之一是如何做一个网站,它走过从构建到建立一个完整产品组合网...

上海网站建设 上海网站设计www.paiky.net

目前最受欢迎的课程之一是如何做一个网站,它走过从构建到建立一个完整产品组合网站的过程。然而,即使完成了课程,学习也才刚刚开始。成千上万的学生自己定制了案例项目,展示家人一切事情和他们喜爱的动物的照片。

 

上海网站建设教他们如何建立一个基本的网站,但是有许多加强功能可以被添加。例如,如何添加CSS悬停效果到图像库中的照片。

 

一个简单的网站

 

页面响应,并设有一个有五个组合件的画廊。画廊本身有一个无序列表,每个列表项包含有嵌套的图像内部链接。就其本身而言,是相当不错的,但添加一个漂亮的悬停效果则更为有趣。请记住,悬停状态一般不会在移动设备上工作,但它不能有害其添加为桌面用户,只要改进,就不是一个基本网站的功能。

u=369572469,2784964679&fm=23&gp=0

添加悬停效果

 

上海网站建设教你这种效果是通过将一些简单的CSS创建。如果你已经有一个预先存在的网站,修改选择,你自定义标记此代码的工作。以下的代码,快速分解它是如何工作的:

#gallery li {

perspective: 250px;

}

 

#gallery a img {

transition: 100ms;

transform: translateZ(0px);

box-shadow: 0px 0px 0px rgba(0,0,0,0);

}

 

#gallery a img:hover {

transform: translateZ(25px) rotate(3deg);

box-shadow: 0px 0px 10px rgba(0,0,0,0.8);

}

每个列表项具有视角特性。默认情况下,消失点的三维效应是在所选择的元件的中心,所以在这种情况下,每个列表项将是一个独立的三维环境。如果立体属性被代替施加到一些父元素在DOM树中较高时,图像会代替向外移动远离页的中心。这可能是一个理想的效果,这取决于你的目标。

 

画廊图片都有100毫秒的过渡。这意味着,如果任何有关的画廊图像变化(适用于悬停等造型),他们应该制作动画到新的状态在指定的时间段。默认情况下,没有​​变换也没有的box-shadow。

 

在悬停状态的画廊图像,一个翻译上的Z轴沿有轻微的旋转应用。这是一个工整的作用,对自身的,但加入的图像下方的方块阴影有助于销售的图像来剥离页面的效果。在这种情况下,阴影的不透明度将动画与阴影的模糊半径,给人的阴影变得越来越模糊的进一步远离它从页面移动的效果。

未经允许不得转载:派琪PAIKY