tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📝 Added sandbox (code sketchbook)

Browse source
This commit is contained in:
z3rOR0ne 2023-04-22 00:41:54 -07:00
parent b475595f7f
commit b5daf18b1a
142 changed files with 100702 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

21
sandbox/css_circle/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="halfclip">
<div class="halfcircle" id="clipped"></div>
</div>
<div class="halfcircle" id="fixed"></div>
<div class="finalcircle">
<div id="innercircle"</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

17
sandbox/css_circle/script.js Normal file
View file

@ -0,0 +1,17 @@
const delay = (ms) =>
new Promise(res => setTimeout(res, ms))
const finalCircle = document.getElementsByClassName("finalcircle")
const halfClip = document.getElementById("halfclip")
const clipped = document.getElementById("clipped")
const fixed = document.getElementById("fixed")
const halfCircle = document.getElementsByClassName("halfcircle")
window.addEventListener('load', async () => {
await delay(1000)
halfClip.style.visibility = "hidden"
clipped.style.visibility = "hidden"
fixed.style.visibility = "hidden"
halfCircle[0].style.visibility = "hidden"
finalCircle[0].style.visibility = "visible"
})

77
sandbox/css_circle/style.css Normal file
View file

@ -0,0 +1,77 @@
#container {
position: absolute;
width: 12px;
height: 12px;
}
#halfclip {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
animation: cliprotate 1s steps(2) infinite;
}
.halfcircle {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 4px transparent;
border-top-color: blue;
border-left-color: blue;
border-radius: 50%;
}
#clipped {
width: 200%;
animation: rotate 0.5s linear infinite;
}
#fixed {
width: 100%;
transform: rotate(135deg);
animation: showfixed 1s steps(2) infinite;
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@keyframes showfixed {
0% {opacity: 0;}
49.9% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
/***********************
* MY ADDITIONS
************************/
.finalcircle {
display: flex;
justify-content: center;
align-items: center;
width: 12px;
height: 12px;
border-radius: 100%;
visibility: hidden;
background-color: blue;
}
#innercircle {
position: absolute;
top: 3.5px;
width: 4px;
height: 4px;
background-color: white;
border-radius: 100%;
}