effect6 bouncing by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<td>Definisce una cella di una tabella HTML.
valueValore alfanumerico o booleano contenuto in un elemento
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<i>Formatta il testo in corsivo/italico non enfatizzato
<object>Incorpora risorse varie nella pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

SEMI al FUTURO [Immagine Home]

Array of Colors

La ragazza con la valigia

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<div class="box"><b></b></div> 

<a href="https://codewith.it/p/5222cACDApAc" target="_blank" title="view code source" class="source">code source</a>

body { background: #222; }
.box {
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgb(247,255,110) 100%);
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: inset 0 0 50px #785500;
  border-radius: 5px;
  overflow: hidden;
}
.box b {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #FFBA2C;
  box-shadow:  -10px 15px 10px rgba(0,0,0,0.48),  inset 10px 10px 20px#855A00;
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 100%; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left:100%; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 100%; }
}
@keyframes moveX {
  from { left: 0; } to { 
    left: 100%;
    box-shadow:  -15px -15px 10px rgba(0,0,0,0.48), inset -10px 10px 20px#855A00;
}
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 100%; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 100%; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top:100%; }
}
@keyframes moveY {
  from { top: 0; } to { top: 100%; 
      box-shadow:  15px 15px 10px rgba(0,0,0,0.48) , inset 10px -10px 20px#855A00;
        ;}
}

.source {
  padding:10px 20px;
  border-radius:5px;
  font-size:1.2em;
  text-decoration:none;
  position:fixed;
  top:0;
  left;
  0;
  margin:10px;
  font-weight:bold;
  color:white;
}
.source:hover {
  background:grey;
}