Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

50
LINES

< > BotCompany Repo | #1030265 - hArrows - overlay arrows you can move around

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (2899L/19K).

sS hArrows() {
  ret hcss([[
    .arrows {
      position: absolute;
      top: 100;
      left: 100;
      transform: translate(-50%,-50%);
    }
    
.arrows span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-bottom: 3px solid blue;
  border-right: 3px solid blue;
  transform:  rotate(45deg);
  margin:-13px;
  animation: animateArrow 2s infinite;
}

.arrows span:nth-child(2){
  animation-delay: -0.1s;
  
}

.arrows span:nth-child(3){
  animation-delay: -0.3s;
  
}


  @keyframes animateArrow {
  
  0%{
    opacity:0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  
  50%{
    opacity:1;
  }
  100%{
    opacity:2;
    transform: rotate(45deg) translate(20px,20px);
    }
  }
  
 ]])
  + hdiv(linesLL(span(), span(), span()), class := "arrows");
}

download  show line numbers  debug dex   

Travelled to 4 computer(s): bhatertpkbcr, ekrmjmnbrukm, mqqgnosmbjvj, pyentgdyhuwx

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: 19 / 44
Version history: 3 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1030265 & http://1030265.tinybrain.de