css链接样式_CodePen挑战1：样式部分与CSS的链接

css链接样式

有什么比CodePen更好的方式来运行Web设计社区项目？ 在这方面，这是第一个挑战，我希望您检查一下示例笔，进行分叉并进行改进。 那就是你要做的。 最好的例子将在一周左右的时间内展示出来！

更新：结果！

挑战赛的参赛作品现已关闭– 看一下大家的想法！

挑战

几周前， 乔纳森 （ Jonathan）写了一篇有关将动态部分链接添加到网页的教程。 想法是，一段JavaScript贯穿整个网页，找到所有<h1>部分标题，然后将链接附加到每个链接，以允许用户共享该链接。

链接本身是隐藏的，直到用户将鼠标悬停在标题上为止。

我们希望您使此链接看起来很棒。 也许您将文本切换为某种图标？ 还是使链接更小并为其提供背景？ 也许不透明度更改对您来说有点安全-给它一些动画效果？ 只要您想做任何事情，只要它发生在CSS选项卡的范围内即可。

交给你

这是您需要做的，只需几个简单的步骤即可。

第1步

首先， 转到CodePen上的演示 。 看起来是这样的：

第2步

点击Fork按钮创建自己的副本，然后根据需要对CSS进行任意更改。

第3步（可选）

如果您已登录CodePen，则可以通过单击“ 信息”按钮来编辑描述。 使用它可以使人们对您的工作有所了解。

第4步

点击保存 ，就完成了。 完成后，请务必在评论中让我们知道–也可以通过发@wdtuts来让我们知道。

而已！ 所有条目将在CodePen上添加到此集合中 ，最好的示例将在一周左右的时间里在Tuts +上展示！

祝您好运，别忘了在Codepen上关注Tuts + ！

翻译自: https://webdesign.tutsplus.com/articles/codepen-challenge-1-style-section-links-with-css--cms-23527

css链接样式