un casino pazzesco by @LeoMosc - Codewith.it

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

References

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
typeSpecifica la tipologia/funzione di un elemento.
<textarea>Area di testo libero espandibile per form HTML
langSpecifica la lingua del contenuto di un elemento
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<h5>Titolo di intestazione di quinto livello

Users

Log in to search for users

Explore

Find inspiration

esercizio pag. 335

Esercitazione n. 1

BasicStructure.html

esercizio gatto

congettura collatz

VerdeTech (v3) - Orto Botanico | P

GreenBox - Giardinaggio a casa tua

esercitazione5.html

esercitazione n1

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