easypress.co.il
ואוו!הילדים ביקשו לעשות בועות סבון
Soap bubbles
זה עם קוד (פחות מסובך ממה שנראה)
באמת שאלה טובה,
הנושאים החמים
<script>
document.addEventListener("mousemove", function(e){
let body = document.querySelector('body');
let bubble = document.createElement("span");
bubble.classList.add('my-bubble');
let x = e.offsetX;
let y = e.offsetY;
bubble.style.left = x+'px';
bubble.style.top = y+'px';
let size = Math.random() * 80;
let transformValue = Math.random() * 360;
bubble.style.width = 20 + size+'px';
bubble.style.height = 20 + size+'px';
bubble.style.transform = 'rotate(' + transformValue + 'deg)';
body.appendChild(bubble);
setTimeout(function(){
bubble.remove();
},1000)
})
</script>body{
height: 100vh;
overflow: hidden;
cursor: url(https://easypress.co.il/wp-content/uploads/2022/07/bubbles-2.png),auto;
}
.my-bubble
{
position: absolute;
pointer-events: none;
transition: 0.5s;
animation: my-animate 1s linear infinite;
}
.my-bubble::before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
border-radius: 50%;
animation: moveShape 1s linear infinite;
}
@keyframes my-animate
{
0%,100%
{
opacity: 0;
}
20%,80%
{
opacity: 1;
}
}
@keyframes moveShape
{
0%
{
transform: translate(0) rotate(0deg);
}
100%
{
transform: translate(300px) rotate(360deg);
}
}
מה הכוונה?
מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!
לוח לימודים
מסלולי לימוד שאפשר להצטרף
אליהם ממש עכשיו:
