菜单栏鼠标经过伸缩效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 30px;
            width: 300px;
            margin: 50px auto;
            overflow: hidden;
            transition: 2s;
            border-radius: 15px;
        }
        nav:hover{
            height: 180px;
        }
        h2{
            background: orange;
            color: white;
            height: 30px;
            line-height: 30px;
        }
        nav:hover h2{
            background: black;
        }
        ul{
            background: orange;
            color: white;
        }
        ul li{
            height: 30px;
            line-height: 30px;
        }
        </style>
    </head>
    <body>
        <nav>
            <h2>菜单栏</h2>
            <ul>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
            </ul>
        </nav>
    </body>
</html>

时间： 2024-12-19 12:14:24

菜单栏鼠标经过伸缩效果的相关文章

jQuery照片伸缩效果，不是单纯的图片放大缩小，不影响其他元素的布局

之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的.今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了. 我也努力过自己尝试着写: 但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间). 后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的.其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是

鼠标拖动虚影效果（拖动的时候使用图片蒙人，但效果不错）

疯狂delphi delphiXE7.XE8.XE10公开课A 群号:58592705 鼠标拖动虚影效果 1 //1.定义消息 2 procedure MYHideMessage(var Msg: tagMSG; var Handled: Boolean); 3 4 //2.执行消息 5 procedure TForm2.MYHideMessage(var Msg: tagMSG; var Handled: Boolean); 6 var 7 pt:TPoint; 8 bit: TBitmap;

_鼠标移动跟随效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>_鼠标移动跟随效果</title> <style> div { width: 50px; height: 50px; border-radius: 50%; position: absolute; text-align: center; font-size: 30px; color: #

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

无聊，纯css写了个评分鼠标移入的效果

<!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" xml:lang="en"> <head> <meta h

js鼠标移入移出效果【原】

<HTML> <HEAD>  <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>js鼠标移入移出效果</TITLE> <style> *{ margin:2;paddin

鼠标滑动--水滴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标滑动--水滴效果</title> <style> *{margin: 0;padding: 0;} body{padding: 100px;} div{width: 50px;height: 50px;background-color: #2

菜单栏展开和收起效果(纯js)

2014年6月25日 15:36:29 需要关注的是: 1.用cookie保存用户当前点击的菜单项,不打扰后端代码 2.通过数学计算得到要显示和隐藏的div 3.点击事件是动态绑定到a标签上的,因此当dom加载完后,再执行js,也就是写在onload里 HTML如下: 1 <h3 class="titleH3" id="101">aaaa</h3> 2 <div class="subNav" id="1&q

第44天：鼠标移动放大效果

1.鼠标移动放大效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鼠标移动放大效果</title> 6 <style> 7 .box{ 8 width: 350px; 9 height: 350px; 10 position: relative; 11 margin: