un casino pazzesco by @LeoMosc - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
formnovalidateImpedisce la convalida di un singolo elemento input
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<aside>Definisce un contenuto separato dal testo perincipale
autofocusAttiva un elemento al caricamento della pagina.

Users

Log in to search for users

Explore

Find inspiration

ARKO - Artificial Intelligence Kno

PERGAMEMORY - I Segreti dei Bevill

26/01/2024 pagina html

esame di informatica

Curriculum html

form per il torneo misto disfor s

Countdown fine anno

Design, Marketing & AI News (Portf

Scheda Tecnica Xiaomi 14 Ultra

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