I am faced with a dilemma involving two images. The first one will be used for my website, while the second one was manually created to identify fixed points. However, my issue lies in the fact that I am unsure how to incorporate my CSS animation into these specific locations.
I find myself at a standstill as the dots keeping changing positions based on screen or browser sizes. It is imperative that the design remains consistent across all browsers for a seamless user experience.
View the first picture https://i.sstatic.net/cuzxK.jpg
View the second picture (the targeted dot locations) https://i.sstatic.net/C41oZ.jpg
Here is the current code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<img src="https://i.imgur.com/LpQXJfW.jpg" id="bg" alt="">
</body>
</html>The pulsing dot animation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #cfd9df;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
background-color: rgba(255, 82, 82, 1);
border-radius: 50%;
animation: pulse-red 1.9s infinite;
height: 25px;
width: 25px;
}
@keyframes pulse-red {
0% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
}
80% {
transform: scale(1);
box-shadow: 0 0 0 11px rgba(255, 82, 82, 0);
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
}
}
</style>
<body>
<div class="circle"></div>
</body>
</html>My ultimate goal comprises the skeleton presented above. Subsequently, an attempt was made illustrating my intended purpose. Unfortunately, it lacks responsiveness and necessitates manual handling of point placement.
function placeDiv(x_pos, y_pos) {
var d = document.querySelector('.circle');
d.style.position = "absolute";
d.style.left = x_pos + 'px';
d.style.top = y_pos + 'px';
}
window.addEventListener("click", function(e) {
placeDiv(e.clientX, e.clientY);
});#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
width: 100%;
height: 100%;
object-fit: cover;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 82, 82, 1);
border-radius: 50%;
animation: pulse-red 1.9s infinite;
height: 25px;
width: 25px;
}
@keyframes pulse-red {
0% {
transform: scale(0.9) translate(-50%, -50%);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
}
80% {
transform: scale(1) translate(-50%, -50%);
box-shadow: 0 0 0 11px rgba(255, 82, 82, 0);
}
100% {
transform: scale(0.9) translate(-50%, -50%);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
}
}<body>
<img src="https://i.imgur.com/52dLf1W.jpg" id="bg" alt="">
<div class="circle"></div>
</body>How can I seamlessly integrate four pulsing animations onto my image to maintain uniformity across all screen sizes?