DivCss鼠标划过滑动门效果资源-CSDN下载

共9个文件

gif：6个

htm：1个

css：1个

需积分: 9 187 浏览量 2008-02-25 15:21:09 上传评论 1 收藏 6KB RAR 举报

在网页设计中，"滑动门"效果是一种常见的CSS（层叠样式表）技术，用于创建动态和交互式的用户体验。这种效果通常应用于导航菜单、按钮或者其他需要突出显示或响应鼠标悬停事件的元素。"DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果，它通过改变鼠标悬停在元素上时的背景图像位置，创造出一种类似门开启或关闭的动画效果。具体来说，滑动门效果主要基于以下CSS属性： 1. **伪类选择器**：`:hover` 是CSS中的一个伪类，用于定义当鼠标指针浮动在元素上方时该元素的样式。在这个效果中，`:hover` 用于触发滑动门的打开动作。 2. **背景定位**：CSS的`background-position`属性用于设置背景图像的位置。在滑动门效果中，这个属性会根据鼠标悬停的状态改变，使得一部分图像向左或向右移动，形成门滑动的视觉效果。 3. **相对定位与绝对定位**：为了实现元素内部部分的相对移动，可能需要使用`position`属性。通常，父元素设置为`relative`，子元素设置为`absolute`，这样可以控制子元素相对于父元素的位置变化。 4. **宽度与高度调整**：滑动门效果可能需要对元素的宽度和高度进行精确控制，以确保滑动部分能够正确显示。 5. **过渡效果**：CSS的`transition`属性可以添加平滑的过渡动画，使得滑动门在开启和关闭时更加自然。这可以通过设置`transition-duration`（持续时间）、`transition-timing-function`（速度曲线）和`transition-delay`（延迟时间）来实现。 6. **背景切片**：为了实现滑动效果，背景图像通常会被切分成两部分，一部分是门的左侧，另一部分是右侧。当鼠标悬停时，左右两侧会相对滑动，形成门打开的效果。在提供的源程序中，开发者可能已经编写了HTML结构和相应的CSS代码来实现这一效果。HTML可能包含了一个或多个`div`元素，每个元素都有相应的类或ID，用于应用滑动门的CSS样式。CSS文件则包含了上述提到的各种属性设置，通过计算背景图像的位置和应用过渡效果来完成滑动门的动画。为了更好地理解并应用这个效果，你需要查看源代码，了解如何设置元素的尺寸、定位以及背景图像。同时，可以尝试修改不同参数，如过渡时间、滑动距离等，以达到理想的设计效果。这个效果对于提升网页的互动性和吸引力非常有用，特别是在创建动态导航菜单时。

资源推荐

资源详情

资源评论

收起资源包目录

DivCss鼠标划过滑动门效果.rar （9个子文件）

DivCss鼠标划过滑动门效果

CSSmen.htm 3KB

images

bg.gif 87B

bg5_6_1.gif 174B

i1_1.gif 44B

bg5_6_2.gif 829B

Thumbs.db 8KB

bg7.gif 46B

i1.gif 44B

cssmen.css 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑动门CSS</title> <link href="cssmen.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" > function g(p) { return document.getElementById(p);} function hoverli(n) { for( var i=1;i<=3;i++) { g('m_'+i).className='normal'; g('list_'+i).className='unlist'; } g('m_'+n).className='active'; g('list_'+n).className='list'; } </script> </head> <body> <div class="blank9"></div> <div class="main"> <div class="left"> <div id="cssmenu" class="menu"> <ul> <li id="m_1" class="active" onmouseover="hoverli(1);" >新闻</li> <li id="m_2" class="normal" onmouseover="hoverli(2);">图片新闻</li> <li id="m_3" class="normal" onmouseover="hoverli(3);">广东新闻</li> </ul> </div> <div class="content"> <div id="list_1" class="list" > <ul> <li><a href="http://news.163.com/07/0616/03/3H30GPJI0001124J.html">山西黑砖窑558名被拐民工获救</a></li> <li><a href="http://news.163.com/07/0616/00/3H2O158P00011229.html">老人被车撞反遭毒打行凶者全家资料曝光</a></li> <li><a href="http://news.163.com/07/0616/08/3H3JGOAU0001124J.html">保监会公示交强险费率浮动办法</a></li> <li><a href="http://news.163.com/07/0616/03/3H31DM1500011229.html">北京四星饭店旋转门卡死3岁男童(组图)</a></li> <li><a href="http://news.163.com/07/0616/01/3H2PT9U70001124J.html">云南称宣威40%高考考生作弊说法不实</a></li> <li><a href="http://news.163.com/07/0616/05/3H39CIDI00011229.html">大学生求爱不成捅破女友处女膜</a></li> <li><a href="http://gd.news.163.com/">深圳无车日：副市长带头乘公交(图)</a></li> <li><a href="http://adclient.163.com/event.ng/Type=click&FlightID=88375&AdID=89862&TargetID=510&Values=31,43,51,60,72,81,92,100,110,312,330,332,515,589,702,733,734&Redirect=http://news.163.com/07/0611/14/3GNCPB5G0001125P.html">[商讯]驰名商标或将“摘牌”</a></li> </ul> </div> <div id="list_2" class="unlist" > <ul> <li><a href="http://news.163.com/07/0616/03/3H30GPJI0001124J.html">山西黑砖窑558名被拐民工获救</a></li> <li><a href="http://news.163.com/07/0616/00/3H2O158P00011229.html">老人被车撞反遭毒打行凶者全家资料曝光</a></li> <li><a href="http://news.163.com/07/0616/08/3H3JGOAU0001124J.html">保监会公示交强险费率浮动办法</a></li> </ul> </div> <div id="list_3" class="unlist" > <ul> <li><a href="http://news.163.com/07/0616/01/3H2PT9U70001124J.html">云南称宣威40%高考考生作弊说法不实</a></li> <li><a href="http://news.163.com/07/0616/05/3H39CIDI00011229.html">大学生求爱不成捅破女友处女膜</a></li> <li><a href="http://gd.news.163.com/">深圳无车日：副市长带头乘公交(图)</a></li> <li><a href="http://adclient.163.com/event.ng/Type=click&FlightID=88375&AdID=89862&TargetID=510&Values=31,43,51,60,72,81,92,100,110,312,330,332,515,589,702,733,734&Redirect=http://news.163.com/07/0611/14/3GNCPB5G0001125P.html">[商讯]驰名商标或将“摘牌”</a></li> </ul> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈