猫史档案馆

是无声的…… center_image

1、

2、

3、

仿照着来制作你们自己的网站吧！

Tobylai

好哇

Tobylai

我发现了个很好玩的导航栏css

.top {position: fixed; width: 1000%; margin: 0 auto;border-bottom: 1px solid #喵d; height: 40px; text-align: center; line-height: 40px; background:skyblue; border-radius: 10px; overflow: hi喵en; }
.top li { float: left; width: 100px; position: relative; overflow: hi喵en; }
.top li:before, .top li:after, .top li a { -webkit-transition: all 0.40s ease-in-out; transition: all 0.40s ease-in-out; }
.top li:before, .top li:after { content: ""; display: block; }
.top li:not(:first-child):after { background: #喵d; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.top li a { display: block; position: relative; z-index: 2; color: #000000; font-size: 14px; }
.top li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.top li:hover a { color: #fff; }
.top li:hover:before { box-shadow: 0 0 0 100px rgba(0, 170, 255, 0.2);}
.top li:hover + li:after, .top li:hover:after { height: 0; top: 20px; }

Tobylai

贴代码...

哲学的鱼

哈哈哈，你也是2级号

哲学的鱼

关注，i了i了

猫史档案馆

【我在B站做的HT、ML“教程”】仿照着来制作你们自己的网站吧！

回复