un casino pazzesco by @garghy64 - Codewith.it

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

Referenze

multipleConverte in lista a selezione multipla
postDefinisce un metodo di invio di dati al server
<tr>Definisce le righe di una tabella (rows)
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<hr>Inserisce una linea orizzontale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio 2 esame

cosa sono le specialità

servizio_fiscale.html

Review of Functions I

Donazioni per il compleanno di Emm

Eleganza Gioielli (Ufficiale)

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.

<body class="color" id="bodi">
<div id="container">
<div id="logowrap">
    <div>
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
        <div class="p0"></div>
    </div>  
  </div>
  </div>
  <div class="obj">
</div>
</body>
  <div class="cont">
  <div id="" class="bubbles"></div>
</div>
<canvas id="canvas"></canvas>

bodi {
  z-index:1;
}

#logowrap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:0;
  height:0;

}
#logowrap>div{
  display:inline-block;
  position:relative;
}
#logowrap>div div{
  position:absolute;
}
#logowrap .p1, #logowrap .p2, #logowrap .p3{
  width:100px;
  height:100px;
  border-radius:50%;
  box-shadow:0 0 30px rgba(255,255,255,0.57);
}
#logowrap .p0{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:300px;
  height:300px;
  border-radius:50%;
  background-color:green;
  -webkit-animation: p0 10s;
  -webkit-animation-iteration-count: infinite;
}
#logowrap .p1{
  background-color:red;
  -webkit-animation: p1 10s;
  -webkit-animation-iteration-count: infinite;
}
#logowrap .p2{
  background-color:green;
  -webkit-animation: p2 10s;
  -webkit-animation-iteration-count: infinite;
}
#logowrap .p3{
  background-color:blue;
  -webkit-animation: p3 10s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes p1
{
  0% {
    transform: rotate(0deg)
      translate(300px)
      rotate(0deg);
  }
  50% {
    transform: rotate(360deg)
      translate(0px) 
      rotate(-360deg);
    background-color:rgb(255,186,186);
  }
  100% {
    transform: rotate(0deg)
      translate(300px)
      rotate(0deg);
  }
}
@-webkit-keyframes p2
{
  0% {
    transform: rotate(120deg)
      translate(400px)
      rotate(-120deg);
  }
  50% {
    transform: rotate(600deg)
      translate(0px) 
      rotate(-600deg);
    background-color:rgb(109,255,109);
  }

  100% {
    transform: rotate(120deg)
      translate(400px)
      rotate(-120deg);
  }
}
@-webkit-keyframes p3
{
  0% {
    transform: rotate(240deg)
      translate(600px)
      rotate(-240deg);
  }
  50% {
    transform: rotate(00deg)
      translate(0px) 
      rotate(-00deg);
      background-color:rgb(125,167,255);
  }
  100% {
    transform: rotate(240deg)
      translate(600px)
      rotate(-240deg);
  }
}
@-webkit-keyframes p0
{
  0% {
    background-color:rgb(0,0,0);
        box-shadow:inset 0 0 50px white ;
  }
  50% {
    background-color:rgb(255,255,255);
   
  }
  100% {
    background-color:black;
           box-shadow:inset 0 0 50px white ;
  }
}
.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;
  
}
.color{
animation:color-change-2x 5s linear infinite alternate both;
}
@keyframes color-change-2x{0%{background:#FFFFFF}100%{background:#000000}}

.obj {
  background: rgb(2,0,36);
  background: -o-linear-gradient(315deg, rgb(4,0,68) 0%, rgba(9,9,121,1) 30%, rgba(0,212,255,1) 100%);
  background: linear-gradient(135deg, rgb(4,0,68) 0%, rgba(9,9,121,1) 30%, rgba(0,212,255,1) 100%);
  -webkit-box-shadow: inset 0 0 100px #fff7;
          box-shadow: inset 0 0 100px #fff7;
  width:30vh;
  border-radius:50%;
  height:30vh;
  top:0;
  bottom:0;
  position:fixed;
  left:0;
  right:0;
  margin:auto;
  animation: rotate-s 10s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
  -webkit-animation: rotate-s 10s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite both;
}

@-webkit-keyframes rotate-s {
 0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}

@keyframes rotate-s {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
    border-radius:50%;
  }
  40% {
    -webkit-transform: scale(0.3) rotateZ(675deg);
    transform: scale(0.3) rotateZ(675deg);
    border-radius:0%;
box-shadow: inset 15px 15px 5px white
  }
    50% {
    -webkit-transform: scale(0.28) rotateZ(700deg);
    transform: scale(0.28) rotateZ(700deg);
    border-radius:0%;
      box-shadow: inset 0px 0px 80px #fff9;
  }
  75% {
    -webkit-transform: scale(0.7) rotateZ(500deg);
    transform: scale(0.7) rotateZ(500deg);
    border-radius:40%;
    border:none;
  }
  100% {
    border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}

@keyframes rotate-f {
  20% {
	border-radius:30%;
       -webkit-transform: scale(0.8) rotateZ(800deg);
    box-shadow:inset 0 0 60px #fff;
  }
  40% {
	border-radius:50%;
    -webkit-transform: scale(1) rotateZ(360deg);
  }
      100% {

  }
}
/*bolle*/
.cont {
  width: 100%;
  height: 100vh;
  position:fixed;
  left:0;
  bottom:0;
 /* background: linear-gradient(#5A85FF, #001067);*/
  
}
.bubbles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bubble {
  width: 6px;
  height: 6px;
  border-radius: 50%;

background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0.21612394957983194) 0%, rgba(69,149,252,0.5298494397759104) 100%);
  will-change: transform;
  transition: 2s;
}
.bubble-container {
  position: absolute;
  bottom: 0;
  animation: bubbleRise 10s infinite ease-in;
  will-change: transform;
}
@keyframes bubbleRise {
  0% {
    opacity: 0;
    bottom: 0;
  }
  15% {
    bottom: 0;
    opacity: 0.1;
    margin-left: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    margin-left: 50px;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
canvas{
  position:fixed;
  top:0;
  left:0;
}

const minBubbles = 60;
const maxBubbles = minBubbles * 2;
const minSize = 7;
const maxSize = 25;
const minDelay = 2;
const maxDelay = 28;
const minPos = 0;
const maxPos = 100;
const minBlur = 0;
const maxBlur = 0;

function gen(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
const $bubbles = document.querySelector('[class="bubbles"]');
const totalBubbles = gen(minBubbles, maxBubbles);
const bubbleElements = Array(totalBubbles).fill(null).map(() => {
  const bubbleSize = gen(minSize, maxSize);
  const bubblePos = gen(minPos, maxPos);
  const blurSize = gen(minBlur, maxBlur);
  const animationDelay = gen(minDelay, maxDelay);
  const $container = document.createElement('div');
  $container.className = 'bubble-container';
  $container.style.left = `${bubblePos}%`;
  $container.style.filter = `blur(${blurSize}px)`;
  $container.style.animationDuration = `${animationDelay}s`;
  const $bubble = document.createElement('div');
  $bubble.className = 'bubble';
  $bubble.style.width = `${bubbleSize}px`;
  $bubble.style.height = `${bubbleSize}px`;
  $container.appendChild($bubble);
  $bubbles.appendChild($container);
  return {
    $container: $container,
    $bubble: $bubble
  };
});
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();


var flakes = [],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    flakeCount = 200,
    mX = -100,
    mY = -100

    canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function snow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < flakeCount; i++) {
        var flake = flakes[i],
            x = mX,
            y = mY,
            minDist = 150,
            x2 = flake.x,
            y2 = flake.y;

        var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
            dx = x2 - x,
            dy = y2 - y;

        if (dist < minDist) {
            var force = minDist / (dist * dist),
                xcomp = (x - x2) / dist,
                ycomp = (y - y2) / dist,
                deltaV = force / 2;

            flake.velX -= deltaV * xcomp;
            flake.velY -= deltaV * ycomp;

        } else {
            flake.velX *= .98;
            if (flake.velY <= flake.speed) {
                flake.velY = flake.speed
            }
            flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
        }

        ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
        flake.y += flake.velY;
        flake.x += flake.velX;
            
        if (flake.y >= canvas.height || flake.y <= 0) {
            reset(flake);
        }


        if (flake.x >= canvas.width || flake.x <= 0) {
            reset(flake);
        }

        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
        ctx.fill();
    }
    requestAnimationFrame(snow);
};

function reset(flake) {
    flake.x = Math.floor(Math.random() * canvas.width);
    flake.y = 0;
    flake.size = (Math.random() * 2) + 1;
    flake.speed = (Math.random() * 1) + 0.5;
    flake.velY = flake.speed;
    flake.velX = 0;
    flake.opacity = (Math.random() * 0.5) + 0.3;
}

function init() {
    for (var i = 0; i < flakeCount; i++) {
        var x = Math.floor(Math.random() * canvas.width),
            y = Math.floor(Math.random() * canvas.height),
            size = (Math.random() * 3) + 2,
            speed = (Math.random() * 1) + 0.5,
            opacity = (Math.random() * 0.5) + 0.3;

        flakes.push({
            speed: speed,
            velY: speed,
            velX: 0,
            x: x,
            y: y,
            size: size,
            stepSize: (Math.random()) / 30,
            step: 0,
            angle: 180,
            opacity: opacity
        });
    }

    snow();
};

init();