求教大神,css应该怎么布局才能实现下图的布局和hover的特效

html-css021

求教大神,css应该怎么布局才能实现下图的布局和hover的特效,第1张

用css的:hover伪类。

给你介绍下css的伪类。

a:link {} /* 未访问的链接 */

a:visited {} /* 已访问的链接 */

a:hover {}/* 当有鼠标悬停在链接上 */

a:active {} /* 被选择的链接 */

但是你说的img实现的不如用css的background来实现更容易些,不过你还需要准备这六块鼠标放在上面变灰的图片。当鼠标悬停在某张图片时,背景自动换成灰的。

ie浏览器中有自带的切换效果可供调用;

其它浏览器的话得自己写程序定位,如淡入淡出可以利用设置css的opacity属性实现;

百叶窗可以利用程序生成N个div,每个div的背景图为你要加载的图,然后设置好每个div的位置即可

首先我们创建一个html文件,写出html文件的一些基础代码

然后我们在网页中新建一个div,并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件,查看效果,可以看到我们创建的标签自带有一定的格式,

接下来我们使用下面的代码去除标签的格式,其中:list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示,并且为左浮动margin-right:20px表示设置标签右外边距

刷新浏览器中html文件查看效果,

这里我们开始添加动画:

标签添加:

transition:transform 0.1s

transform表示变换的属性,0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动,第一个参数为水平移动值,第二个参数为垂直移动值,

进入浏览器直接查看效果,如下图实现了鼠标滑过块,块上移的动画特效,如下图: