kiliczsh · August 8, 2023 11:58
diff --git a/cssheart.html b/cssheart.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
  /* Set the background color for the whole page */
  body {
    background-color: #ffb6c1; /* peach background color */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
  }

  /* Create a container for the heart shape */
  .heart {
    position: relative; /* Position the pseudo-elements relative to this container */
    width: 100px;
    height: 90px; /* Adjust the height to shape the heart */
    transition: transform 0.3s ease; /* Add a transition effect for smooth resizing */
    cursor: pointer; /* Set cursor to pointer on hover to indicate it's clickable */
  }

  /* Create the left half of the heart */
  .heart::before,
  .heart::after {
    content: "";
    position: absolute; /* Position these elements absolutely within the container */
    top: 0;
    width: 52px; /* Adjust the width to shape the heart */
    height: 80px; /* Adjust the height to shape the heart */
    border-radius: 50px 50px 0 0; /* Create a rounded top edge for the heart */
    background: red; /* red color */
  }

  .heart::before {
    left: 50px; /* Position the left half of the heart */
    transform: rotate(-45deg); /* Rotate it to form the left side */
    transform-origin: 0 100%; /* Set the rotation origin */
  }

  /* Create the right half of the heart */
  .heart::after {
    left: 0; /* Position the right half of the heart */
    transform: rotate(45deg); /* Rotate it to form the right side */
    transform-origin: 100% 100%; /* Set the rotation origin */
  }

  /* Apply a scale transform on hover to make the heart bigger */
  .heart:hover {
    transform: scale(1.2); /* Scale up by 20% */
  }

  /* Add a class for the animated bubble effect */
  .bubble {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: bubbleAnim 1.5s ease-out;
  }

  @keyframes bubbleAnim {
    0% {
      transform: translateY(0) scale(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) scale(1);
      opacity: 0;
    }
  }
 </style>
 </head>
 <body>
  <div class="heart" id="heart"></div>

  <script>
    const heart = document.getElementById('heart');
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; // Rainbow colors

    heart.addEventListener('click', function(event) {
      for (let i = 0; i < 10; i++) { // Change the number of bubbles here
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Random color from rainbow colors
        bubble.style.left = (event.clientX - 10) + 'px';
        bubble.style.top = (event.clientY - 10) + 'px';
        document.body.appendChild(bubble);

        // Remove the bubble after animation
        bubble.addEventListener('animationend', function() {
          bubble.remove();
        });
      }
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	/* Set the background color for the whole page */
	body {
	background-color: #ffb6c1; /* peach background color */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	}

	/* Create a container for the heart shape */
	.heart {
	position: relative; /* Position the pseudo-elements relative to this container */
	width: 100px;
	height: 90px; /* Adjust the height to shape the heart */
	transition: transform 0.3s ease; /* Add a transition effect for smooth resizing */
	cursor: pointer; /* Set cursor to pointer on hover to indicate it's clickable */
	}

	/* Create the left half of the heart */
	.heart::before,
	.heart::after {
	content: "";
	position: absolute; /* Position these elements absolutely within the container */
	top: 0;
	width: 52px; /* Adjust the width to shape the heart */
	height: 80px; /* Adjust the height to shape the heart */
	border-radius: 50px 50px 0 0; /* Create a rounded top edge for the heart */
	background: red; /* red color */
	}

	.heart::before {
	left: 50px; /* Position the left half of the heart */
	transform: rotate(-45deg); /* Rotate it to form the left side */
	transform-origin: 0 100%; /* Set the rotation origin */
	}

	/* Create the right half of the heart */
	.heart::after {
	left: 0; /* Position the right half of the heart */
	transform: rotate(45deg); /* Rotate it to form the right side */
	transform-origin: 100% 100%; /* Set the rotation origin */
	}

	/* Apply a scale transform on hover to make the heart bigger */
	.heart:hover {
	transform: scale(1.2); /* Scale up by 20% */
	}

	/* Add a class for the animated bubble effect */
	.bubble {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: bubbleAnim 1.5s ease-out;
	}

	@keyframes bubbleAnim {
	0% {
	transform: translateY(0) scale(0);
	opacity: 1;
	}
	100% {
	transform: translateY(-100px) scale(1);
	opacity: 0;
	}
	}
	</style>
	</head>
	<body>
	<div class="heart" id="heart"></div>

	<script>
	const heart = document.getElementById('heart');
	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; // Rainbow colors

	heart.addEventListener('click', function(event) {
	for (let i = 0; i < 10; i++) { // Change the number of bubbles here
	const bubble = document.createElement('div');
	bubble.className = 'bubble';
	bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Random color from rainbow colors
	bubble.style.left = (event.clientX - 10) + 'px';
	bubble.style.top = (event.clientY - 10) + 'px';
	document.body.appendChild(bubble);

	// Remove the bubble after animation
	bubble.addEventListener('animationend', function() {
	bubble.remove();
	});
	}
	});
	</script>
	</body>
	</html>
No results found