html + js + css 数据可视化大屏项目中,有个地方需要滚动展示,之前一直用vue插件实现的,现在需要js加css实现,将实现过程记录一下。
效果截图
动态效果
为了实现列表的上下循环滚动,可以使用JavaScript来调整列表的内容。当一个项目完全滚动出视图时,可...
yekong
1年前 (2023-08-17) 849℃
0喜欢
动态效果
你可以使用CSS动画或JavaScript来实现文字依次显示的效果。以下是一个使用Vue和CSS动画的示例代码:
<template>
<div class="text-container">
<span...
yekong
1年前 (2023-08-11) 1180℃
0喜欢
最近有一个数据可视化大屏开发,需要一个动画效果。列表环绕旋转动画效果。这个效果和上一个效果gsap补间动画环绕运行效果比较类似,只不过上一个效果是单个组件实现动画,当前效果是多个组件实现动画。客户看了以后增加了一项要求,就是动画中的两行高度是不一样的,上面的高一些,下面的矮一些,...
yekong
2年前 (2023-04-14) 672℃
0喜欢
vue3数据大屏开发时,为了让页面更酷炫,会增加很多动画效果,这一次我们使用 gsap补间动画 插件来实现一个4个角向中间汇聚的效果。
项目演示
vue3 数据可视化大屏智能科技登录页
效果描述
根据设计图来看当前边框有4个角标的效果,我们给这4个角标增加一个动画,从透明到不透...
yekong
2年前 (2023-04-14) 728℃
0喜欢
在数据大屏开发中,会需要动画点缀,今天实现的动画效果,环绕运动,gsap补间动画插件参数有很多,今天使用gsap的帧动画keyframes来实现一个环绕运行的效果。
沿着div盒子的四个边上一直运动,形成一个环绕动画的效果。
效果演示
效果代码
<template>...
yekong
2年前 (2023-04-09) 855℃
0喜欢
vue3 数据可视化大屏 项目开发中,为了让项目页面更酷炫,会增加很多动画效果,今天使用 gsap补间动画 实现线条延伸动画效果。
线条延伸效果,是通过一条线将两个div进行连接,让线条的宽度从0延伸到自己想要的长度,达到一个线条延伸的效果。
上面的动画中有一个水柱上升的效果是...
yekong
2年前 (2023-03-29) 1046℃
0喜欢