What I’m trying to do is align the fingerprint button with the center of the neon loading circle. Also, when I click the finger print button it should start the animation rather than at the start of loading page.
I’ve included the HTML/CSS/JS I’m using right now.
HTML:
<!DOCTYPE html>
<head>
<title> @isaranwrap - Chess Lessons</title>
<link href = "css/style.css" type = "text/css" rel = "stylesheet">
<script src = "https://d3js.org/d3.v3.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://kit.fontawesome.com/fd3faaa138.js" crossorigin="anonymous"></script>
</head>
<!--
<a href = "https://github.com/isaranwrap/StandardizingAKI"> jj
<div id="flaggerLogo"> <img width=132 height=144 src="images/07hexlogo.png" style = "float: left"></div>
</a> -->
<body>
<div class="card">
<div class="rating">
<div class="block">
<button class="btn">
<span class="material-icons-outlined"><i class='fas fa-fingerprint'></i></span>
</button>
</div>
</div>
</div>
<!-- <div class="rating">
<h2><span class="counter" data-target="50">50</span><sup>%</sup><br>HTML</h2>
<div class="block"></div>
</div>
</div> -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var circleCursor = document.createElement('div');
circleCursor.className = 'circle-cursor';
document.body.appendChild(circleCursor);
document.addEventListener('mousemove', function (e) {
circleCursor.style.left = e.clientX + 'px';
circleCursor.style.top = e.clientY + 'px';
circleCursor.style.display = 'block';
// document.removeEventListener('mousemove', this);
});
});
</script>
<script>
const rating = document.getElementsByClassName('rating')[0];
const block = document.getElementsByClassName('block');
for (var i = 1; i < 100; i++){
rating.innerHTML += "<div class='block'></div>";
block[i].style.transform = "rotate("+ 3.6 * i + "deg)";
block[i].style.animationDelay = `${i/40}s`;
}
</script>
<script src = "code/landingPage.js"></script>
</body>
CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
body {
background: linear-gradient(
90deg, rgba(46, 44, 45, 1) 0%,
rgba(66, 64, 67, 1) 100%
);
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100vh;
margin: 0;
}
html, body, span, button {
cursor: none;
}
.card {
z-index:100;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#444,#222);
}
.card {
position: relative;
width: 200px;
height: 200px;
}
.card .rating {
position: relative;
width: 100%;
height: 100%;
/* background: #f00; */
}
.card .rating .block {
position: absolute;
width: 2px;
height: 10px;
background: #000;
left: 50%;
transform-origin: 50% 100px;
opacity: 0;
animation: animate 2s linear forwards;
/* transform: rotate(25deg); */
}
/* .block .btn {
transform: translate(-50%, -50%);
} */
@keyframes animate {
to {
opacity: 1;
}
}
.card .rating .block:nth-child(-n+51) {
background: aquamarine;
box-shadow: 0 0 15px aquamarine, 0 0 30px #0f0;
}
.card .rating h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.2em;
font-weight: 500;
text-align: center;
line-height: 1.5em;
}
.card .rating h2 span {
font-size: 2.5em;
font-weight: 700;
}
.card .rating h2 sup {
font-size: 1.5em;
font-weight: 300;
}
.circle-cursor {
position: fixed;
width: 10px;
height: 10px;
/* background-color: #008ECE; */
background-color: rgb(135, 206, 235);
border-radius: 50%;
pointer-events: auto;
z-index: 9999;
display: none;
}
.btn {
position: relative;
width: 7em;
height: 7em;
border-radius: 50%;
outline: none;
border: 4px #090909 solid;
background: linear-gradient(
145deg, #171717, #444245
);
box-shadow: inset 2px 2px 0px #7d7c7e,
inset -2px -2px 0px #1c1c1c;
color: #a6a6a6;
}
.btn span {
font-size: 2.9em;
}
.btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: inherit;
background: linear-gradient(
145deg, #262626, #606060
);
width: 7.25em;
height: 7.25em;
z-index: -1;
box-shadow: 11px 11px 22px #141414,
-11px -11px 22px #525252;
}
.button-clicked {
background: linear-gradient(
-185deg, #131313, #444245;
);
box-shadow: inset -2px -2px 0px #5e5e5e,
inset 2px 2px 0px #1c1c1c;
}
.button-hover {
background: #5e5e5e;
}
.icon-clicked {
color: #0fa;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
}
/* .icon-clicked {
color: #fff;
text-shadow: 0px 0px 15px #008ECE;
} */
/* https://css-tricks.com/how-to-create-neon-text-with-css/ */
Javascript:
// Select the button
const btn = document.querySelectorAll('.btn');
for(let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function(e) {
btn[i].classList.toggle('button-clicked');
btn[i].firstElementChild.classList.toggle('icon-clicked');
})
btn[i].addEventListener('mouseover', function(e) {
btn[i].classList.toggle('button-hover');
})
btn[i].addEventListener('mouseover', function(e) {
btn[i].classList.add('button-hover');
})
btn[i].addEventListener('mouseout', function(e) {
btn[i].classList.remove('button-hover');
})
}
I tried messing around with the CSS and JS to no avail.