Easy_Y

写一个基于vue+css的排名面板简单的Demo,不依赖其他前端组件和UI切图,掘金独家发布，方便jym复制即用，当然代码也存在很多待优化和提高的地方,我就抛个砖引玉！代码不一定优雅，贵在实用！

网页设计中，动态效果不仅可以增强用户体验，还能为网页增添趣味性。使用 CSS 和 JavaScript, 我将简单介绍一下如何使用这css和JS技术来绘制一个时钟，并使其指针能够随时间移动！

前言 该案例主要用到了css的新特性 @property来实现交互流光效果 @property是CSS Houdini API的一部分，通过它，开发者可以在样式表中直接注册自定义属性

前端css+vue纯手搓一个统计面板,布局内采用flex属性，方便后期只要修改外层div的尺寸，可以很好的自动适配宽高

数据项展示区域-css拆解 1.使用flex属性完成4等分布局 flex: 1 0 auto; 的含义是：flex项目将尝试等比例放大以填充可用空间（如果有的话），但不会缩小以适应更小的容器空间

1.效果图 鼠标经过卡片高亮展示 底部纹路有过渡光效 2.用css上一个简单的纹路背景 3.用css手搓一个六边形然后v-for循环

纯手工写一个复选框前端交互，这样可以自由定制自己想要展示的字段和设计风格。可能存在槽点，大家多多担待！

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 定义一个json串 list，实现它的拖拽排序。 使用标题插槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用来标记draggable元素。请注意，无论标题…

纯css实现 3D图标交互动画效果。css本身实现逐帧图动画不难，难得是3D序列帧图制作要求高。还好这是UI改操心的事。哈哈！