SAO-UI-PLAN-Card-Widget

点击查看参考教程

预览效果

预览效果

开发历程

因为是SAO UI PLAN中可以说唯一的纯css项目毕竟总共也就写了三个UI，所以做的进度非常的快。而且原理也非常的简单。

前期尝试是通过对几个空div做变形，再通过盒子模型做位移来达到期望的梯形突起标签效果。

用到的css

用到的html

此处灵活运用了css的transform属性中的rotateX形变，也就是沿着X轴的3D旋转。

但是在实装到主题的过程中，遇到了一点阻力。因为写UI的时候是用的空div，想要照搬的话，就需要魔改源码。这种高耦合的做法很不适合最终将其插件化的目的，所以，我尝试使用伪类来实现。

效果还算理想。一开始使用的是侧栏卡片外框的伪类，后来发现这样会给没有标题的侧栏也添加一个梯形突起，所以很迅速的换到了标题栏所在的div里。代价则是，伪类定位需要判断的情况更复杂了，而且手机端和电脑端的效果有微妙的不同，猜测是分辨率以及我滥用百分比作为适配单位的关系。

最后造成的情况就是，虽然可以实现UI的变动，但是css属性的可移植性极差，没法适配任何人的主题，只能作为原理帖来简述。如果是其他人要使用的话，要自己根据主题进行微调。这部分主要体现在便签微妙的偏移量上。

侧栏卡片UI重新

唯一需要做的事情就是添加一个CSS。在中添加如下内容。

然后在中引入即可。

侧栏作者卡片样式重构

重写作者卡片UI，改成游戏角色属性面板

常规显示角色属性值，鼠标悬停翻转显示social icon

TO DO

侧栏卡片UI改造’

使用伪类实现UI改造