这篇博客介绍了一个使用CSS3创建的导航效果，当鼠标悬停时，圆形导航会扩大并显示箭头及缩略图。该效果利用了CSS3的转换属性，适用于图像滑动展示和导航菜单。示例代码展示了如何设置链接元素的绝对定位以及前后箭头的样式。
这是一个使用CSS3制作的美丽的悬停效果的图像导航。这个想法是为了扩大一个圆形的导航与箭头,使缩略图出现。在这个例子中会显示下一个和滑块图像的缩略图的箭头。效果是通过CSS3转换完成。
CSS现在让我们来看看,如何添加这个导航的风格。假设我们有一些相对周围的容器,我们将设置链接元素的绝对位置。高度和宽度是70像素,这样我们有一个不太小面积的悬停效果:.cn-nav > a{ position: absolute; top: 0px; height: 70px; width: 70px;}a.cn-nav-prev{ left: 0px;}a.cn-nav-next{ right: 0px;}
dd:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
