找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › Wyn 商业智能专区 › 插件和资源 › 查看内容
发新帖

ZenosZeng 讲师达人认证 悬赏达人认证

超级版主

299

主题

7874

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13131

活字格认证圣诞拼拼乐微信认证勋章讲师达人元老葡萄悬赏达人

最新发帖

仪表板动效元素：滑动的流星

ZenosZeng 讲师达人认证 悬赏达人认证
超级版主   /  发表于：2021-1-28 23:56  /   查看：3297  /  回复：2
在仪表板设计时，经常需要添加一些动效来提升视觉冲击力，这个帖子主要介滑动的流星。

实现步骤：
1、在仪表板中添加外部扩展
image.png795945434.png

2、将以下代码粘贴到外部扩展的Html视图中，点击确定
image.png893712768.png
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5.   height: 100vh;
  6.   overflow: hidden;
  7.   display: flex;
  8.   font-family: "Anton", sans-serif;
  9.   justify-content: center;
  10.   align-items: center;
  11. }

  13. .night {
  14.   position: relative;
  15.   width: 100%;
  16.   height: 100%;
  17.   transform: rotateZ(45deg);
  18. }

  20. .shooting_star {
  21.   position: absolute;
  22.   left: 50%;
  23.   top: 50%;
  24.   height: 2px;
  25.   background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  26.   border-radius: 999px;
  27.   filter: drop-shadow(0 0 6px #699bff);
  28.   -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  29.           animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  30. }
  31. .shooting_star::before {
  32.   content: "";
  33.   position: absolute;
  34.   top: calc(50% - 1px);
  35.   right: 0;
  36.   height: 2px;
  37.   background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  38.   transform: translateX(50%) rotateZ(45deg);
  39.   border-radius: 100%;
  40.   -webkit-animation: shining 3000ms ease-in-out infinite;
  41.           animation: shining 3000ms ease-in-out infinite;
  42. }
  43. .shooting_star::after {
  44.   content: "";
  45.   position: absolute;
  46.   top: calc(50% - 1px);
  47.   right: 0;
  48.   height: 2px;
  49.   background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  50.   transform: translateX(50%) rotateZ(45deg);
  51.   border-radius: 100%;
  52.   -webkit-animation: shining 3000ms ease-in-out infinite;
  53.           animation: shining 3000ms ease-in-out infinite;
  54.   transform: translateX(50%) rotateZ(-45deg);
  55. }
  56. .shooting_star:nth-child(1) {
  57.   top: calc(50% - 104px);
  58.   left: calc(50% - 300px);
  59.   -webkit-animation-delay: 4574ms;
  60.           animation-delay: 4574ms;
  61. }
  62. .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after {
  63.   -webkit-animation-delay: 4574ms;
  64.           animation-delay: 4574ms;
  65. }
  66. .shooting_star:nth-child(2) {
  67.   top: calc(50% - 153px);
  68.   left: calc(50% - 183px);
  69.   -webkit-animation-delay: 813ms;
  70.           animation-delay: 813ms;
  71. }
  72. .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after {
  73.   -webkit-animation-delay: 813ms;
  74.           animation-delay: 813ms;
  75. }
  76. .shooting_star:nth-child(3) {
  77.   top: calc(50% - -166px);
  78.   left: calc(50% - 161px);
  79.   -webkit-animation-delay: 9519ms;
  80.           animation-delay: 9519ms;
  81. }
  82. .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after {
  83.   -webkit-animation-delay: 9519ms;
  84.           animation-delay: 9519ms;
  85. }
  86. .shooting_star:nth-child(4) {
  87.   top: calc(50% - 176px);
  88.   left: calc(50% - 163px);
  89.   -webkit-animation-delay: 9645ms;
  90.           animation-delay: 9645ms;
  91. }
  92. .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after {
  93.   -webkit-animation-delay: 9645ms;
  94.           animation-delay: 9645ms;
  95. }
  96. .shooting_star:nth-child(5) {
  97.   top: calc(50% - 98px);
  98.   left: calc(50% - 279px);
  99.   -webkit-animation-delay: 6788ms;
  100.           animation-delay: 6788ms;
  101. }
  102. .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after {
  103.   -webkit-animation-delay: 6788ms;
  104.           animation-delay: 6788ms;
  105. }
  106. .shooting_star:nth-child(6) {
  107.   top: calc(50% - -46px);
  108.   left: calc(50% - 235px);
  109.   -webkit-animation-delay: 6197ms;
  110.           animation-delay: 6197ms;
  111. }
  112. .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after {
  113.   -webkit-animation-delay: 6197ms;
  114.           animation-delay: 6197ms;
  115. }
  116. .shooting_star:nth-child(7) {
  117.   top: calc(50% - -130px);
  118.   left: calc(50% - 274px);
  119.   -webkit-animation-delay: 6205ms;
  120.           animation-delay: 6205ms;
  121. }
  122. .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after {
  123.   -webkit-animation-delay: 6205ms;
  124.           animation-delay: 6205ms;
  125. }
  126. .shooting_star:nth-child(8) {
  127.   top: calc(50% - -143px);
  128.   left: calc(50% - 173px);
  129.   -webkit-animation-delay: 8236ms;
  130.           animation-delay: 8236ms;
  131. }
  132. .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after {
  133.   -webkit-animation-delay: 8236ms;
  134.           animation-delay: 8236ms;
  135. }
  136. .shooting_star:nth-child(9) {
  137.   top: calc(50% - 98px);
  138.   left: calc(50% - 289px);
  139.   -webkit-animation-delay: 3801ms;
  140.           animation-delay: 3801ms;
  141. }
  142. .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after {
  143.   -webkit-animation-delay: 3801ms;
  144.           animation-delay: 3801ms;
  145. }
  146. .shooting_star:nth-child(10) {
  147.   top: calc(50% - -35px);
  148.   left: calc(50% - 177px);
  149.   -webkit-animation-delay: 7845ms;
  150.           animation-delay: 7845ms;
  151. }
  152. .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after {
  153.   -webkit-animation-delay: 7845ms;
  154.           animation-delay: 7845ms;
  155. }
  156. .shooting_star:nth-child(11) {
  157.   top: calc(50% - -125px);
  158.   left: calc(50% - 181px);
  159.   -webkit-animation-delay: 8729ms;
  160.           animation-delay: 8729ms;
  161. }
  162. .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after {
  163.   -webkit-animation-delay: 8729ms;
  164.           animation-delay: 8729ms;
  165. }
  166. .shooting_star:nth-child(12) {
  167.   top: calc(50% - -35px);
  168.   left: calc(50% - 97px);
  169.   -webkit-animation-delay: 5926ms;
  170.           animation-delay: 5926ms;
  171. }
  172. .shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after {
  173.   -webkit-animation-delay: 5926ms;
  174.           animation-delay: 5926ms;
  175. }
  176. .shooting_star:nth-child(13) {
  177.   top: calc(50% - -85px);
  178.   left: calc(50% - 60px);
  179.   -webkit-animation-delay: 1679ms;
  180.           animation-delay: 1679ms;
  181. }
  182. .shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after {
  183.   -webkit-animation-delay: 1679ms;
  184.           animation-delay: 1679ms;
  185. }
  186. .shooting_star:nth-child(14) {
  187.   top: calc(50% - 186px);
  188.   left: calc(50% - 70px);
  189.   -webkit-animation-delay: 2818ms;
  190.           animation-delay: 2818ms;
  191. }
  192. .shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after {
  193.   -webkit-animation-delay: 2818ms;
  194.           animation-delay: 2818ms;
  195. }
  196. .shooting_star:nth-child(15) {
  197.   top: calc(50% - -125px);
  198.   left: calc(50% - 115px);
  199.   -webkit-animation-delay: 6864ms;
  200.           animation-delay: 6864ms;
  201. }
  202. .shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after {
  203.   -webkit-animation-delay: 6864ms;
  204.           animation-delay: 6864ms;
  205. }
  206. .shooting_star:nth-child(16) {
  207.   top: calc(50% - 73px);
  208.   left: calc(50% - 9px);
  209.   -webkit-animation-delay: 1772ms;
  210.           animation-delay: 1772ms;
  211. }
  212. .shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after {
  213.   -webkit-animation-delay: 1772ms;
  214.           animation-delay: 1772ms;
  215. }
  216. .shooting_star:nth-child(17) {
  217.   top: calc(50% - -43px);
  218.   left: calc(50% - 135px);
  219.   -webkit-animation-delay: 2615ms;
  220.           animation-delay: 2615ms;
  221. }
  222. .shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after {
  223.   -webkit-animation-delay: 2615ms;
  224.           animation-delay: 2615ms;
  225. }
  226. .shooting_star:nth-child(18) {
  227.   top: calc(50% - -92px);
  228.   left: calc(50% - 2px);
  229.   -webkit-animation-delay: 3037ms;
  230.           animation-delay: 3037ms;
  231. }
  232. .shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after {
  233.   -webkit-animation-delay: 3037ms;
  234.           animation-delay: 3037ms;
  235. }
  236. .shooting_star:nth-child(19) {
  237.   top: calc(50% - -164px);
  238.   left: calc(50% - 44px);
  239.   -webkit-animation-delay: 6626ms;
  240.           animation-delay: 6626ms;
  241. }
  242. .shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after {
  243.   -webkit-animation-delay: 6626ms;
  244.           animation-delay: 6626ms;
  245. }
  246. .shooting_star:nth-child(20) {
  247.   top: calc(50% - 14px);
  248.   left: calc(50% - 256px);
  249.   -webkit-animation-delay: 4858ms;
  250.           animation-delay: 4858ms;
  251. }
  252. .shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after {
  253.   -webkit-animation-delay: 4858ms;
  254.           animation-delay: 4858ms;
  255. }

  257. @-webkit-keyframes tail {
  258.   0% {
  259.     width: 0;
  260.   }
  261.   30% {
  262.     width: 100px;
  263.   }
  264.   100% {
  265.     width: 0;
  266.   }
  267. }

  269. @keyframes tail {
  270.   0% {
  271.     width: 0;
  272.   }
  273.   30% {
  274.     width: 100px;
  275.   }
  276.   100% {
  277.     width: 0;
  278.   }
  279. }
  280. @-webkit-keyframes shining {
  281.   0% {
  282.     width: 0;
  283.   }
  284.   50% {
  285.     width: 30px;
  286.   }
  287.   100% {
  288.     width: 0;
  289.   }
  290. }
  291. @keyframes shining {
  292.   0% {
  293.     width: 0;
  294.   }
  295.   50% {
  296.     width: 30px;
  297.   }
  298.   100% {
  299.     width: 0;
  300.   }
  301. }
  302. @-webkit-keyframes shooting {
  303.   0% {
  304.     transform: translateX(0);
  305.   }
  306.   100% {
  307.     transform: translateX(300px);
  308.   }
  309. }
  310. @keyframes shooting {
  311.   0% {
  312.     transform: translateX(0);
  313.   }
  314.   100% {
  315.     transform: translateX(300px);
  316.   }
  317. }
  318. @-webkit-keyframes sky {
  319.   0% {
  320.     transform: rotate(45deg);
  321.   }
  322.   100% {
  323.     transform: rotate(405deg);
  324.   }
  325. }
  326. @keyframes sky {
  327.   0% {
  328.     transform: rotate(45deg);
  329.   }
  330.   100% {
  331.     transform: rotate(405deg);
  332.   }
  333. }
  334. </style>
  335. </head>
  336. <body>

  338. <div class="night">
  339.   <div class="shooting_star"></div>
  340.   <div class="shooting_star"></div>
  341.   <div class="shooting_star"></div>
  342.   <div class="shooting_star"></div>
  343.   <div class="shooting_star"></div>
  344.   <div class="shooting_star"></div>
  345.   <div class="shooting_star"></div>
  346.   <div class="shooting_star"></div>
  347.   <div class="shooting_star"></div>
  348.   <div class="shooting_star"></div>
  349.   <div class="shooting_star"></div>
  350.   <div class="shooting_star"></div>
  351.   <div class="shooting_star"></div>
  352.   <div class="shooting_star"></div>
  353.   <div class="shooting_star"></div>
  354.   <div class="shooting_star"></div>
  355.   <div class="shooting_star"></div>
  356.   <div class="shooting_star"></div>
  357.   <div class="shooting_star"></div>
  358.   <div class="shooting_star"></div>
  359. </div>
  360. </body>
  361. </html>
复制代码

2 个回复

倒序浏览
summer小小
中级会员   /  发表于：2022-7-16 15:34:17
沙发
你好这个复制也不能用，希望能多更新一些动效元素，比如动态边框
回复 使用道具 举报
Eden.SunWyn认证
超级版主   /  发表于：2022-7-17 18:46:48
板凳
summer小小 发表于 2022-7-16 15:34
你好这个复制也不能用，希望能多更新一些动效元素，比如动态边框

您好，您可以在我们的葡萄城市场查找更多插件和动效哦：https://marketplace.grapecity.co ... tabName=Tabs_detail
在论坛这里的话，您可以直接复制代码（不要通过“复制代码”的按钮进行复制），就可以啦
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部