项目介绍
这是一个使用Ant Design图标库的网站。Ant Design是一个企业级中后台前端/设计解决方案，基于 React 和 TypeScript 实现。Ant Design提供了一套完整的设计规范、丰富的组件以及直观的 API,帮助开发人员构建漂亮的界面。
Ant Design图标库样式
本项目使用了Ant Design提供的图标库样式。这些样式主要应用于网站上的图标元素。通过引入.anticon类，可以使图标以适当的大小和颜色显示在网页上。同时，.anticon > *选择器用于设置图标内部元素的样式，确保图标的清晰可读性。此外，.anticon::before伪元素用于定义图标的前置内容，.anticon .anticon-icon选择器用于设置图标的主要部分。
.anticon {
display: inline-block;
color: inherit;
font-style: normal;
line-height: 0;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.anticon > * {
line-height: 1;
}
.anticon svg {
display: inline-block;
}
.anticon::before {
display: none;
}
.anticon .anticon-icon {
display: block;
}
.anticon[tabindex] {
cursor: pointer;
}
.anticon-spin::before,
.anticon-spin {
display: block;
}
.anticon-spin::after {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
在这个示例中，我们为.anticon-spin元素添加了旋转动画效果。当用户点击具有tabindex属性的图标时，鼠标指针会变成手指形状。这些样式可以帮助开发者快速构建具有美观和交互性的网页。
