我发现了这个漂亮的下划线动画
<ul> <li><a href="#">关于</a></li> <li><a href="#">作品集</a></li> <li><a href="#">博客</a></li> <li><a href="#">联系</a></li> </ul> body,html { margin: 0; font: bold 14px/1.4 'Open Sans', arial, sans-serif; background: #000; } ul { margin: 150px auto 0; padding: 0; list-style: none; display: table; width: 600px; text-align: center; } li { display: table-cell; position: relative; padding: 15px 0; } a { color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; position: relative; } a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } a:hover:after { width: 100%; left: 0; } @media screen and (max-height: 300px) { ul { margin-top: 40px; } }
我知道我必须将上面的代码应用到我的 NavItem 组件中。动画和一切都很好,但看起来它适用于我的 NavItem 组件,但适用于整个导航栏 NavItem CSS 和应用程序图像
我只是几个小时的会员,所以我不知道在我的本地主机中显示网站的正确方法是什么。也对五月英语感到抱歉。 :)
我建议您使用css.modules并在组件中添加一个className。首先创建css模块,很简单。按照以下步骤进行操作:
(常量的名称由您自己选择)
验证类是否应用了css代码。