导航栏钢琴键怎么实现？

题记：今天给大家再去演练一下我们导航当中出现的钢琴键的效果，这里边使用到了伪元素，过渡和2d，并没有使用其他难得知识点，随便不常用，但是效果很好，初学者可以体验一把。
#导航栏钢琴键的使用
##下边是效果图

##下边是代码

 <style type="text/css">ul{list-style: none;}li{float: left;width: 80px;height: 30px;text-align: center;line-height: 30px;position: relative;/* 溢出部分以隐藏方式处理 */overflow: hidden;}a{text-decoration: none;color: #0000FF;z-index: 66;}/* 添加伪元素 */a::after{content: "";display: block;width: 80px;height: 30px;background: linear-gradient(to top,red,yellow);/* 绝对定位 */position: absolute;top: 30px;left: 0px;/* 让伪元素处于a内容下边,防止影响动画影响到a文字 */z-index: -3;/* 规定过渡 */transition: all 1s linear;}/* 滑过之后2d位移 */li:hover a::after{transform: translateY(-30px);}</style></head><body><ul><li><a href="">苹果</a></li><li><a href="">香蕉</a></li><li><a href="">西瓜</a></li><li><a href="">哈密瓜</a></li></ul></body>

导航栏钢琴键怎么实现？相关推荐

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
android values-v21 style 报错,Android 4.4 以上实现透明导航栏和状态栏 Translucent system bar...
第一种方式第一种方式,需要做下面三步设置 1.在values.values-v19.values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme ...
php zblog 侧边栏样式_zblogphp版如何实现导航栏下拉框
zblogphp版目前还无任何插件实现导航栏下拉框,根据自己研究和网上的知识,终于研究成功.下面说下实现步骤: 一.在导航条所在模板模板加入更改以下代码首页{module:navbar} 更改为: ...
mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时，日历选择页面错乱bug...
一.ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMo ...
iOS 导航栏遮挡问题 --- iOS开发系列 ---项目中成长的知识七
不知大家有没有遇见过自己写的tableview被导航栏遮挡住的问题,反正我是遇见过! 因为在ios7以后所有的UIViewController创建后默认就是full Screen的,因此如果带导航栏的 ...
android应用去掉状态栏_Android 显示、隐藏状态栏和导航栏
Android 显示.隐藏状态栏和导航栏控制状态栏显示,Activity的主题中配置全屏属性 true 控制状态栏显示,在setContentView之前设置全屏的flag getWindow(). ...
【bootstrap】如何解决页面缩小后上方导航栏格式变化的问题
问题描述: bootstrap官方模板中上方导航栏当缩小到一定程度后会发生格式的变化,但我想取消这种变化页面缩小前: 页面缩小后: 解决方法: 经过阅读bootstrap的css代码后发现了这么一行 ...
微信小程序自定义导航栏，只保留右上角胶囊按钮
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. navigationStyle 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航 ...

导航栏钢琴键怎么实现？

导航栏钢琴键怎么实现？相关推荐

最新文章

热门文章