un casino pazzesco by @LeoMosc - Codewith.it

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

References

formmethodDefinisce il metodo di invio dei dati oltre a method
<p>Serve a definire paragrafi di testo
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<h1>Titolo di intestazione di primo livello
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
relServe a definire la relazione tra il documento e una risorsa.

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

5/10/24 es. 7 -parole ripetute

DDF2025 - CV & Contatti Profession

Cubo 3D animato

fibonacci manoel

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