css实现立方体转动动画

最近项目中一些可视化内容需要做一些动画,有一个立方体的转动效果,最开始想着是拿一个3D模型放上去,但是看了看别人的实现方式,发现自己想太多。

灵活运用css的transform属性,实现一个立方体是很容易的。

阅读更多

CSS3实现元素缺角及缺角的边框

在项目中碰到一个数据可视化的业务,ui画了一些不规则的缺角矩形作为背景,但是又没有提供切图,本着求人不如求己的原则,就尝试拿CSS来画这种缺角的矩形及边框吧。

阅读更多

实现图片的卷帘对比效果

项目中遇到了一个需求是前台上传原图与对比图,后台进行对比分析,返回一个带有标注的识别结果,然后前台要实现原图与识别结果的卷帘对比效果。

我也不知道这个应该叫什么,感觉像个卷帘门一样,就姑且叫它卷帘效果了。

在学习arcgis的js api时,发现arcgis是有提供这种效果的小部件的,当然这次项目并没有使用arcgis,所以没法使用这个效果。后台问我这种效果好实现不,去找找插件试一下。回想到之前做过图片的截取效果,想着这个也可以用类似的方法实现的吧,所以就用同样的思想实现了这个效果,可能走了弯路,见谅哦。

阅读更多

js实现随页面滚动切换的tab栏

最近项目有个需求,比较简单,就是顶部有tab栏,点击tab栏页面滚动到对应位置,手动的滚动页面tab栏也要随之切换。项目是基于vue2+ant design vue开发的,本来是想借用组件库来方便实现的,但是ui确实相差甚远,而且想着也是个简单功能,就放弃了使用组件库,转而用js来实现这个逻辑。

实现过程中,发现这虽然只是个简单的知识点,但确实也有一些要注意的地方。

阅读更多

CSS中height,max-height,min-height的优先级问题

height,max-height,min-height都是CSS中比较常用的属性,但关于他们的优先级却从没有认真考虑过。最开始考虑这个问题源于秋招时百度的一道笔试题,题目为问div的高度是多少?

1
2
3
4
5
6
7
8
9
10
11
12
<style>
#app{
height: 1000px;
min-height: 500px;
max-height: 300px;
}
</style>
<body>
<div id="app">

</div>
</body>
阅读更多