上海网站建设?上海网站设计（www.paiky.net）

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

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

一个简单的网站

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

添加悬停效果

上海网站建设教你这种效果是通过将一些简单的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轴沿有轻微的旋转应用。这是一个工整的作用，对自身的，但加入的图像下方的方块阴影有助于销售的图像来剥离页面的效果。在这种情况下，阴影的不透明度将动画与阴影的模糊半径，给人的阴影变得越来越模糊的进一步远离它从页面移动的效果。