Ball in and out Animation

<html>

<style>

#btn--yp {

box-sizing: content-box;

position: fixed;

z-index: 9;

bottom: 1em;

right: 1em;

border: solid 1em transparent;

width: 4.625em;

height: 3.25em;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;

font: 16px/1.25 trebuchet ms, sans-serif;

text-indent: 200vw;

text-shadow: none;

filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);

transition: 0.5s;

white-space: nowrap;

}

#btn--yp:before {

box-sizing: inherit;

position: absolute;

left: 0;

bottom: 100%;

margin: 1em -0.5em;

padding: 0.5em;

width: 100%;

border-radius: 5px;

background: #e8e0e0;

color: #000;

text-align: center;

text-decoration: none;

text-indent: 0vw;

white-space: normal;

animation: float 1s ease-in-out infinite alternate;

content: attr(data-txt);

}

#btn--yp:hover,

#btn--yp:focus {

outline: none;

filter: grayscale(0) drop-shadow(0 0 1px crimson);

}

@keyframes float {

to {

transform: translateY(0.75em);

}

body,

div {

display: grid;

}

body {

overflow: hidden;

margin: 0;

height: 100vh;

perspective: 35em;

background: #262626;

animation: a 12s ease-in-out infinite alternate;

}

@keyframes a {

90%,

100% {

perspective: 5em;

}

div {

transform-style: preserve-3d;

}

.dot {

--m: calc(.5*(var(--n-dots) - 1));

--abs: max(var(--m) - var(--j), var(--j) - var(--m));

--f: calc(1.05 - var(--abs)/var(--m));

--k: calc(var(--n-rots)*var(--j)/(var(--n-dots) - 1));

--ay: calc((var(--i) - var(--k))/var(--n-arms)*1turn);

--az: calc((var(--j) + .5)/var(--n-dots)*.5turn - 90deg);

grid-area: 1/1;

place-self: center;

padding: calc(var(--f)*0.5em);

border-radius: 50%;

transform: rotatey(var(--ay)) rotatez(var(--az)) translate(10em) rotatez(calc(-1*var(--az))) rotatey(calc(-1*var(--ay)));

background: radial-gradient(circle at 25% 25%, #fff, rgba(255, 255, 255, 0) 75%) hsl(calc(2*var(--j)/var(--n-dots)*360), 100%, 35%);

}

</style>

<body>

<style>

.dot:nth-child(n + 1) {

--i: 0

}

.dot:nth-child(n + 81) {

--i: 1

}

.dot:nth-child(n + 161) {

--i: 2

}

.dot:nth-child(n + 241) {

--i: 3

}

.dot:nth-child(n + 321) {

--i: 4

}

.dot:nth-child(n + 401) {

--i: 5

}

.dot:nth-child(n + 481) {

--i: 6

}

.dot:nth-child(n + 561) {

--i: 7

}

.dot:nth-child(n + 641) {

--i: 8

}

.dot:nth-child(n + 721) {

--i: 9

}

.dot:nth-child(80n + 1) {

--j: 0

}

.dot:nth-child(80n + 2) {

--j: 1

}

.dot:nth-child(80n + 3) {

--j: 2

}

.dot:nth-child(80n + 4) {

--j: 3

}

.dot:nth-child(80n + 5) {

--j: 4

}

.dot:nth-child(80n + 6) {

--j: 5

}

.dot:nth-child(80n + 7) {

--j: 6

}

.dot:nth-child(80n + 8) {

--j: 7

}

.dot:nth-child(80n + 9) {

--j: 8

}

.dot:nth-child(80n + 10) {

--j: 9

}

.dot:nth-child(80n + 11) {

--j: 10

}

.dot:nth-child(80n + 12) {

--j: 11

}

.dot:nth-child(80n + 13) {

--j: 12

}

.dot:nth-child(80n + 14) {

--j: 13

}

.dot:nth-child(80n + 15) {

--j: 14

}

.dot:nth-child(80n + 16) {

--j: 15

}

.dot:nth-child(80n + 17) {

--j: 16

}

.dot:nth-child(80n + 18) {

--j: 17

}

.dot:nth-child(80n + 19) {

--j: 18

}

.dot:nth-child(80n + 20) {

--j: 19

}

.dot:nth-child(80n + 21) {

--j: 20

}

.dot:nth-child(80n + 22) {

--j: 21

}

.dot:nth-child(80n + 23) {

--j: 22

}

.dot:nth-child(80n + 24) {

--j: 23

}

.dot:nth-child(80n + 25) {

--j: 24

}

.dot:nth-child(80n + 26) {

--j: 25

}

.dot:nth-child(80n + 27) {

--j: 26

}

.dot:nth-child(80n + 28) {

--j: 27

}

.dot:nth-child(80n + 29) {

--j: 28

}

.dot:nth-child(80n + 30) {

--j: 29

}

.dot:nth-child(80n + 31) {

--j: 30

}

.dot:nth-child(80n + 32) {

--j: 31

}

.dot:nth-child(80n + 33) {

--j: 32

}

.dot:nth-child(80n + 34) {

--j: 33

}

.dot:nth-child(80n + 35) {

--j: 34

}

.dot:nth-child(80n + 36) {

--j: 35

}

.dot:nth-child(80n + 37) {

--j: 36

}

.dot:nth-child(80n + 38) {

--j: 37

}

.dot:nth-child(80n + 39) {

--j: 38

}

.dot:nth-child(80n + 40) {

--j: 39

}

.dot:nth-child(80n + 41) {

--j: 40

}

.dot:nth-child(80n + 42) {

--j: 41

}

.dot:nth-child(80n + 43) {

--j: 42

}

.dot:nth-child(80n + 44) {

--j: 43

}

.dot:nth-child(80n + 45) {

--j: 44

}

.dot:nth-child(80n + 46) {

--j: 45

}

.dot:nth-child(80n + 47) {

--j: 46

}

.dot:nth-child(80n + 48) {

--j: 47

}

.dot:nth-child(80n + 49) {

--j: 48

}

.dot:nth-child(80n + 50) {

--j: 49

}

.dot:nth-child(80n + 51) {

--j: 50

}

.dot:nth-child(80n + 52) {

--j: 51

}

.dot:nth-child(80n + 53) {

--j: 52

}

.dot:nth-child(80n + 54) {

--j: 53

}

.dot:nth-child(80n + 55) {

--j: 54

}

.dot:nth-child(80n + 56) {

--j: 55

}

.dot:nth-child(80n + 57) {

--j: 56

}

.dot:nth-child(80n + 58) {

--j: 57

}

.dot:nth-child(80n + 59) {

--j: 58

}

.dot:nth-child(80n + 60) {

--j: 59

}

.dot:nth-child(80n + 61) {

--j: 60

}

.dot:nth-child(80n + 62) {

--j: 61

}

.dot:nth-child(80n + 63) {

--j: 62

}

.dot:nth-child(80n + 64) {

--j: 63

}

.dot:nth-child(80n + 65) {

--j: 64

}

.dot:nth-child(80n + 66) {

--j: 65

}

.dot:nth-child(80n + 67) {

--j: 66

}

.dot:nth-child(80n + 68) {

--j: 67

}

.dot:nth-child(80n + 69) {

--j: 68

}

.dot:nth-child(80n + 70) {

--j: 69

}

.dot:nth-child(80n + 71) {

--j: 70

}

.dot:nth-child(80n + 72) {

--j: 71

}

.dot:nth-child(80n + 73) {

--j: 72

}

.dot:nth-child(80n + 74) {

--j: 73

}

.dot:nth-child(80n + 75) {

--j: 74

}

.dot:nth-child(80n + 76) {

--j: 75

}

.dot:nth-child(80n + 77) {

--j: 76

}

.dot:nth-child(80n + 78) {

--j: 77

}

.dot:nth-child(80n + 79) {

--j: 78

}

.dot:nth-child(80n + 80) {

--j: 79

}

</style>

</div>

</body>

<h1>

<span>MADE BY DEVANSH MISHRA</span>

</h1>

</html>

Search This Blog

Codes.

Ball in and out Animation

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

Python Basic Programs By Devansh Mishra.

" Words moving in circular motion as Tiny Particles " Animation