un casino pazzesco by @LeoMosc - Codewith.it

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

References

multipart/form-dataCodifica dei caratteri di un form
classDefinisce una o più classi per elemento
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<link>Collega il documento corrente con una risorsa esterna
<h1>Titolo di intestazione di primo livello

Users

Log in to search for users

Explore

Find inspiration

il cane (esercizio 2)

numeri primi e divisori pro

textarea select and replace

copia dicountdownfineanno

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<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();