网页里那种鼠标移上去会出现弹簧的阻尼效果是怎么做出来的？不要用flash做，用js或css3

Posted 2023-05-07

一般会用在导航菜单上，就是鼠标移上去的时候，导航背景或下面的高亮边框会来回弹，过一会就停下的效果，而且鼠标移动的距离距当前选项越远，弹回的速度就越快。最好用css3动画实现大部分，然后配合js实现。

这个动画跟css3的动画没什么关系，主要是那个来回弹的东西，叫缓动，模拟真实世界物体加速到减速的过程。搜索下：flash或js缓动函数，有很多文章。追问

之前一直不知道这个效果叫什么，搜索也搜不出来，谢谢

参考技术A 用jQuery做动画，jQuery本身的ease库不全，还需要下载jQuery.easing库
http://www.shirne.com/demo/jquery/easing.asp
我这里有jquery easing效果测试，看源代码里可下载所有代码 参考技术B 直接附链接好了，你看看是不是你要的效果
http://www.lanrentuku.com/js/daohang-532.html本回答被提问者采纳

HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）

如图所示，把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时，底下的内容是不一样的。这种效果如何利用代码实现？如果有具体的代码演示，就最好不过了
百度了一下，这叫【舌签效果】，也有人说叫【选项卡切换】。请问，如果不用JS和JQUERY，纯html+CSS代码能实现吗？

1、利用css的:hover

<div id="content">  
    这是原本的div层  
    <div id="show">  
        <p>这是鼠标移动上去后的div层</p>  
    </div>  
</div> 
<style type="text/css">  
        *  
            margin: 0;  
            padding: 0;  
          
        #content  
            background:#0CF;  
            height:200px;  
            width:200px;  
            margin-left: 20px;  
            margin-top: 20px;  
          
        #show  
            width:200px;  
            height:200px;  
            margin-top: 20px;  
            background:#F09;  
            top:0px;  
            position:absolute;  
            opacity: 0;  
            display: block;  
            font-size: 12px;  
            transition: 0.3s;  
            -webkit-transition: .5s;  
            -moz-transition: .5s;  
          
        #content:hover #show  
            color: #656e73;  
            opacity: 1;  
          
    </style>

参考技术A 最简单的就是你写三个切换标签，定位好，然后再在下面写三个div，每个div包含一个标签的内容，默认第一个显示，其他两个隐藏，然后通过js来移动到第一个标签上显示第一个div的内容，后面一样