CSS3实现苹果电脑的DOCK菜单栏_html/css_WEB-ITnose
程序员文章站
2024-01-11 11:48:58
...
使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.
首先我们需要设计好DOCK栏结构,代码如下
代码名称
然后设置相关的展示效果CSS代码
代码名称
ul,li{ list-style: none;}ul{ margin: 0 auto; width: 600px; height: 300px; background-color: #ff3300; padding: 10px; display: flex; justify-content: center; align-items: flex-end;}li{ display: inline-block; margin: 5px;}li > a{ border: #eee 1px solid; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: #fff; text-decoration: none;}
为什么代码里面都有一个id,a标签里面是#id名称呢?这里就是利用了:target伪类,来实现点击时,选中菜单栏的一个效果.
代码名称
li > a:hover,ul > li:target a{ width: 100px; height: 100px;}ul > li:target{ position: relative; animation: anims 1.5s ease-out;}
动画这里就是上下跳动的效果,非常简单.
代码名称
@keyframes anims { 0%{ top:0; } 25%{ top:-20px; } 50%{ top:0; } 75%{ top:-20px; } 100%{ top:0; }}
接着是选中状态的显示,这里我就用一个 * 号来表示了,这里利用到伪元素 ::after.因为这个选中状态是在选择后才会显示,所以我们必须得在选中之后设置这个样式.
代码名称
ul > li:target:after{ position: absolute; content: "*"; color: #fff; width: 100%; text-align: center;}
这个就是用CSS实现的DOCK菜单栏,这是最基本的原理,大家可以更加美化这个页面.经常代码我们还在后面^_^.
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=186 ,欢迎大家传播与分享.
上一篇: 恢复控制文件故障详细步骤
推荐阅读
-
CSS3实现苹果电脑的DOCK菜单栏_html/css_WEB-ITnose
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
css3实现的动画效果_html/css_WEB-ITnose
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
使用 CSS3 伪元素实现立体的照片堆叠效_html/css_WEB-ITnose
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
CSS3 实现的一个简单的"动态主菜单" 示例[转]_html/css_WEB-ITnose