javascript - 阿里云的这个效果是怎么实现的?
大家讲道理
大家讲道理 2017-06-12 09:32:10
[JavaScript讨论组]

下面是阿里云网站的链接,它里面有一快地方的切换效果是怎么实现的?看css里看不出来:

网站链接地址

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(3)
扔个三星炸死你

hover上去之后添加一个highlight-bg的class,该class对应的css中定义了过渡效果(transition),该过渡效果只是对margin和padding进行过渡,margin:-15px -20px;padding:15px 20px,一正一反,效果就是整体区域变大,但是内容区域不变,所以我们看到了放大的效果。但是实际情况是不仅放大了,整个内容还上移了,大概看了一下,上移的原因是在添加了highlight-bg class的同时,对其内容的上半区域和下半区域都进行了处理,上半区域的处理是:将height调低,同时图标的padding-top缩小,所以整体感觉上移了

ringa_lee

你找找样式中的.navbar-fixed-dropdown-menu .tab-menu,应该就能找到你所需要的了

过去多啦不再A梦

没找到这个页面,但是有个很简单的实现方式:比如 这是4张图片,“高度”实际都是相等的,只不过第1、3、4顶部和背景色一样,所以在视觉上就认为他们比第二个短一截。
当然,我只是拿图片举个例子。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号