Libraryless. Click here for Pure Java version (2899L/19K).
1 | sS hArrows() {
|
2 | ret hcss([[ |
3 | .arrows {
|
4 | position: absolute; |
5 | top: 100; |
6 | left: 100; |
7 | transform: translate(-50%,-50%); |
8 | } |
9 | |
10 | .arrows span{
|
11 | display: inline-block; |
12 | width: 20px; |
13 | height: 20px; |
14 | border-bottom: 3px solid blue; |
15 | border-right: 3px solid blue; |
16 | transform: rotate(45deg); |
17 | margin:-13px; |
18 | animation: animateArrow 2s infinite; |
19 | } |
20 | |
21 | .arrows span:nth-child(2){
|
22 | animation-delay: -0.1s; |
23 | |
24 | } |
25 | |
26 | .arrows span:nth-child(3){
|
27 | animation-delay: -0.3s; |
28 | |
29 | } |
30 | |
31 | |
32 | @keyframes animateArrow {
|
33 | |
34 | 0%{
|
35 | opacity:0; |
36 | transform: rotate(45deg) translate(-20px,-20px); |
37 | } |
38 | |
39 | 50%{
|
40 | opacity:1; |
41 | } |
42 | 100%{
|
43 | opacity:2; |
44 | transform: rotate(45deg) translate(20px,20px); |
45 | } |
46 | } |
47 | |
48 | ]]) |
49 | + hdiv(linesLL(span(), span(), span()), class := "arrows"); |
50 | } |
download show line numbers debug dex old transpilations
Travelled to 5 computer(s): bhatertpkbcr, ekrmjmnbrukm, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030265 |
| Snippet name: | hArrows - overlay arrows you can move around |
| Eternal ID of this version: | #1030265/4 |
| Text MD5: | 97073ba8eb4a333f3a804ee8526b7e9c |
| Transpilation MD5: | 3d8f0ce94ac2d4457c417cf4280760b1 |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-11-21 15:45:45 |
| Source code size: | 835 bytes / 50 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 213 / 306 |
| Version history: | 3 change(s) |
| Referenced in: | [show references] |