Top 50 Best CSS Effect Details in 2024

These best CSS effects Details cover a wide range of design elements and interactivity that can enhance the visual appeal and user experience of websites. Keep in mind that the popularity of these effects can change over time, so it’s always a good idea to stay up to date with current design trends and experiment with new techniques.

Free Make Money Online

Top 50 Best CSS Effect Details in 2024

Of course! Here are some additional details about each of the top 50 most popular CSS effects:

1. Hover Effects: CSS hover effects allow you to change the appearance of an element when the mouse pointer hovers over it, providing interactivity and visual feedback.

2. Transition Effects: CSS transitions enable smooth animations and gradual changes in property values, such as fading, sliding, or scaling elements.

3. Parallax Scrolling: Parallax scrolling creates the illusion of depth by moving different layers of content at different speeds as the user scrolls.

4. Gradient Background: CSS gradients enable smooth colour transitions, allowing you to create visually appealing backgrounds with multiple colours.

5. Box Shadows: Box shadows add depth and dimension to elements, providing a 3D-like effect by casting shadows behind them.

6. Responsive Typography: CSS allows for responsive typography, which adjusts text size, spacing, and line height based on device or screen size.

7. Animated Buttons: CSS animations can bring buttons to life by adding movement, transformation, and hover effects, making them more attractive and interactive.

8. Image Gallery: CSS can create image galleries with features like thumbnails, light boxes, and transitions between images.

9. Card and Grid Layouts: CSS Grid and Flexbox layouts provide a responsive way to structure and arrange elements by creating card-based designs and organized grids.

10. Transformations: CSS transformations allow you to rotate, scale, skew, or translate elements in 2D or 3D space, enabling various visual effects and transformations.

11. Sticky headers: Sticky headers remain at the top of the viewport as the user scrolls, providing navigation and easy access to important information.

12. Dropdown Menus: CSS can create dropdown menus that expand or collapse when activated, allowing for organized navigation.

13. Sliding Sidebar: Sliding sidebars or drawers can be implemented using CSS transitions or animations to reveal additional content or navigation.

14. Animated Counters: CSS animations can be applied to create animated counters that count up or down to a specific number, adding visual interest.

15. Background Videos: CSS allows the embedding and styling of background videos, which can be used to create visually dynamic backgrounds.

16. Scroll animations: CSS animations triggered by scrolling can add subtle or interesting effects to elements as they become visible.

17. Carousel Slider: CSS can create image or content sliders that rotate automatically or can be navigated using controls.

18. Accordion Menus: Accordion menus collapse and expand content sections when clicked, allowing for compact navigation and organization.

19. Tooltip Popups: CSS tooltips display additional information when the user hovers over or interacts with certain elements.

20. Fullscreen Overlays: CSS overlays cover the entire viewport and can display modals, lightboxes, or additional content.

21. Floating Labels: Floating labels animate and move up when users interact with form inputs, providing a more dynamic and modern form experience.

22. Scroll Progress Bars: Progress bars indicate scrolling progress on a webpage, giving users a visual sense of their position.

23. Split Screen Layouts: Split screen layouts divide the screen into two or more sections, allowing for unique and visually appealing content arrangements.

24. Loading Spinners: CSS spinners provide visual feedback to users during the content loading or data retrieval.

25. Mega Menus: Mega menus display multiple columns of navigation options, allowing for more elaborate navigation structures and submenus.

26. Off-canvas navigation: Off-canvas navigation slides from the side of the screen, providing an alternative way to access navigation menus.

27. Modal Windows: Modal windows are popup windows that overlay the main content, often used to display additional information or capture user input.

28. Image zooming: CSS can be used to create zoomable images that expand or display more detail when users hover or click on them.

29. Text animations: CSS animations can be applied to text elements to create effects such as feeding, sliding, or scaling for eye-catching typography.

30. Custom checkboxes and radio buttons: CSS can customize the appearance of checkboxes and radio input elements, providing unique styling.

31. Flip Cards: Flip cards simulate the flipping motion to reveal additional content or information on the reverse side of the card.

32. Circular progress bars: Circular progress bars provide a visual indication of progress, often used in percentage-based situations.

33. Sticky Footers: Sticky footers remain at the bottom of the viewport, even if the content does not fill the entire screen.

34. Animated Hamburger Menus: Hamburger menus animate to different shapes or reveal additional navigation options when clicked, providing a menu toggle.

35. Multiple Column Layouts: CSS can create multiple-column layouts, allowing efficient content organization, especially for articles or blog posts.

36. Image Filters: CSS filters can be applied to images, allowing adjustments such as brightness, contrast, grayscale, or blur effects.

37. Text Gradients: CSS gradients applied to text create a gradient effect that transitions between two or more colours within the text.

38. Background Patterns: CSS can create repeating background patterns, adding texture and visual interest to the overall design.

39. Static backgrounds: Static backgrounds stay in place as the user scrolls, creating a sense of depth and motion in the background.

40. Sticky elements: Sticky elements remain fixed in a specific position on the page, providing constant access to important information or navigation.

41. Scroll Snap: CSS Scroll Snap allows precise scrolling behaviour, automatically snapping content to specific points or positions.

42. Tilt effects: CSS can create tilt effects, where elements react to mouse movements, giving a 3D-like interaction.

43. Animated SVG Icons: CSS animations can be applied to SVG icons, allowing for animated and interactive icons on websites.

44. Text Shadows: CSS text shadows add shadows to text elements, providing depth and enhancing readability or for decorative purposes.

45. Animated Page Transitions: CSS transitions or animations can create smooth transitions between different pages or sections of a website.

46. Animated scroll indicators: Scroll indicators can be animated to show scrolling progress or provide visual cues for long content sections.

47. Overlay text on images: CSS can overlay text on top of images, create visual effects, and combine text and visual elements.

48. Sticky Social Media Buttons: Sticky social media buttons are fixed on the screen, allowing easy access and sharing options across the site.

49. Particle Effects: CSS can create particle effects, simulating small particles or elements moving or interacting on the screen.

50. Perspective Effects: CSS perspective transformations can create 3D-like effects by adjusting the perspective and depth of elements.

100 Most Popular HTML Tags List Details

These CSS effects can be combined and customized to create unique and attractive web designs. Experimenting with these effects and staying updated on new techniques can help you stay ahead of web design trends.

Certainly! Here are 50 CSS effects along with code examples and brief descriptions:

1. Hover Effect on Buttons:

cssCopy code.button {
  background-color: #eaeaea;
  color: #333;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #333;
  color: #fff;
}

2. Image Zoom on Hover:

cssCopy code.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.3s ease;
}

.image-container:hover img {
  transform: scale(1.2);
}

3. Fade In on Page Load:

cssCopy code.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in.visible {
  opacity: 1;
}

JavaScript code:

javascriptCopy codewindow.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.fade-in');
  element.classList.add('visible');
});

4. Text Gradient:

cssCopy code.text-gradient {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

5. Box Shadow:

cssCopy code.box-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

6. Border Radius:

cssCopy code.border-radius {
  border-radius: 10px;
}

7. Text Shadow:

cssCopy code.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

8. Gradient Background:

cssCopy code.gradient-background {
  background: linear-gradient(to bottom right, #ff9a9e, #fad0c4);
}

9. Box Rotate on Hover:

cssCopy code.box-rotate {
  transition: transform 0.3s ease;
}

.box-rotate:hover {
  transform: rotate(45deg);
}

10. Image Grayscale on Hover:

cssCopy code.image-grayscale {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.image-grayscale:hover {
  filter: grayscale(0%);
}

11. Card Flip:

cssCopy code.card {
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #333;
  color: #fff;
}

.card-back {
  background-color: #eaeaea;
}

12. Image Blur on Hover:

cssCopy code.image-blur {
  filter: blur(0);
  transition: filter 0.3s ease;
}

.image-blur:hover {
  filter: blur(5px);
}

13. Sticky Navigation:

cssCopy code.navigation {
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

14. Animated Scroll to Top Button:

cssCopy code.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scroll-to-top.visible {
  opacity: 1;
}

JavaScript code:

javascriptCopy codewindow.addEventListener('scroll', function() {
  const element = document.querySelector('.scroll-to-top');
  if (window.scrollY > 500) {
    element.classList.add('visible');
  } else {
    element.classList.remove('visible');
  }
});

document.querySelector('.scroll-to-top').addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

15. Animated Hamburger Menu:

cssCopy code.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.hamburger-menu .line {
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger-menu.open .line-1 {
  transform: rotate(45deg) translate(3px, 3px);
}

.hamburger-menu.open .line-2 {
  opacity: 0;
}

.hamburger-menu.open .line-3 {
  transform: rotate(-45deg) translate(3px, -3px);
}

JavaScript code:

javascriptCopy codedocument.querySelector('.hamburger-menu').addEventListener('click', function() {
  this.classList.toggle('open');
});

16. Text Animation:

cssCopy code@keyframes text-animation {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-animation {
  animation: text-animation 1s ease;
}

17. Slide In from Left:

cssCopy code@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slide-in-left 0.5s ease;
}

18. Pulse Animation:

cssCopy code@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 1s ease infinite;
}

19. Fade Out Animation:

cssCopy code@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-out {
  animation: fade-out 0.5s ease;
}

20. Shake Animation:

cssCopy code@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.5s ease infinite;
}

21. Slide Down Animation:

cssCopy code@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slide-down 0.5s ease;
}

22. Bounce Animation:

cssCopy code@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 0.5s ease infinite;
}

23. Rotate Animation:

cssCopy code@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 1s ease infinite;
}

24. Scale Animation:

cssCopy code@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.scale {
  animation: scale 1s ease infinite;
}

25. Fill Color Animation:

cssCopy code@keyframes fill-color {
  0% {
    fill: red;
  }
  50% {
    fill: blue;
  }
  100% {
    fill: red;
  }
}

.fill-color {
  animation: fill-color 1s ease infinite;
}

26. Spin Animation:

cssCopy code@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

27. Slide Up Animation:

cssCopy code@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.5s ease;
}

28. Flash Animation:

cssCopy code@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation: flash 1s ease infinite;
}

29. Glow Animation:

cssCopy code@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.7);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  }
}

.glow {
  animation: glow 1s ease infinite;
}

30. Swing Animation:

cssCopy code@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.swing {
  transform-origin: top center;
  animation: swing 1s ease infinite;
}

31. Jello Animation:

cssCopy code@keyframes jello {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75) rotate(-5deg);
  }
  40% {
    transform: scale(0.75, 1.25) rotate(5deg);
  }
  50% {
    transform: scale(1.15, 0.85) rotate(-5deg);
  }
  65% {
    transform: scale(0.95, 1.05) rotate(5deg);
  }
  75% {
    transform: scale(1.05, 0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1, 1);
  }
}

.jello {
  animation: jello 1s ease infinite;
}

32. Heartbeat Animation:

cssCopy code@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.3);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.heartbeat {
  animation: heartbeat 1s ease infinite;
}

33. Confetti Animation:

cssCopy code@keyframes confetti {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1000px) rotate(720deg);
  }
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #eaeaea;
  transform-origin: top left;
  animation: confetti 5s ease infinite;
}

.confetti:nth-child(2n) {
  background-color: #333;
}

.confetti:nth-child(3n) {
  background-color: #ff9a9e;
}

JavaScript code:

javascriptCopy codefunction createConfetti() {
  const confetti = document.createElement('div');
  confetti.classList.add('confetti');
  confetti.style.left = Math.random() * 100 + '%';
  document.body.appendChild(confetti);
  setTimeout(() => {
    confetti.remove();
  }, 5000);
}

setInterval(createConfetti, 100);

34. Typewriter Text Animation:

cssCopy code@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 4s steps(40) infinite;
}

35. Neon Glow Animation:

cssCopy code@keyframes neon-glow {
  0% {
    text-shadow: 0 0 10px rgba(255, 0, 0, 1), 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 1);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.7);
  }
  100% {
    text-shadow: 0 0 10px rgba(255, 0, 0, 1), 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 1);
  }
}

.neon-glow {
  color: red;
  animation: neon-glow 1s ease-in-out infinite;
}

36. Glitch Text Animation:

cssCopy code@keyframes glitch {
  0% {
    clip: rect(77px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(64px, 9999px, 16px, 0);
  }
  10% {
    clip: rect(68px, 9999px, 74px, 0);
  }
  15% {
    clip: rect(85px, 9999px, 12px, 0);
  }
  20% {
    clip: rect(3px, 9999px, 75px, 0);
  }
  25% {
    clip: rect(77px, 9999px, 25px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 72px, 0);
  }
  35% {
    clip: rect(16px, 9999px, 36px, 0);
  }
  40% {
    clip: rect(68px, 9999px, 92px, 0);
  }
  45% {
    clip: rect(84px, 9999px, 85px, 0);
  }
  50% {
    clip: rect(24px, 9999px, 59px, 0);
  }
  55% {
    clip: rect(54px, 9999px, 100px, 0);
  }
  60% {
    clip: rect(33px, 9999px, 33px, 0);
  }
  65% {
    clip: rect(46px, 9999px, 42px, 0);
  }
  70% {
    clip: rect(95px, 9999px, 33px, 0);
  }
  75% {
    clip: rect(82px, 9999px, 39px, 0);
  }
  80% {
    clip: rect(30px, 9999px, 32px, 0);
  }
  85% {
    clip: rect(14px, 9999px, 72px, 0);
  }
  90% {
    clip: rect(63px, 9999px, 21px, 0);
  }
  95% {
    clip: rect(35px, 9999px, 45px, 0);
  }
  100% {
    clip: rect(16px, 9999px, 84px, 0);
  }
}

.glitch {
  font-family: 'Courier New', monospace;
  color: #fff;
  font-size: 30px;
  position: relative;
  animation: glitch 2s infinite;
}

37. Rain Animation:

cssCopy code.rain {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 100% 20px;
  pointer-events: none;
  animation: rain 1s linear infinite;
}

@keyframes rain {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 20px;
  }
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
for (let i = 0; i < 100; i++) {
  const rain = document.createElement('div');
  rain.classList.add('rain');
  container.appendChild(rain);
}

38. Snow Animation:

cssCopy code.snow {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('snowflake.png');
  background-repeat: repeat;
  pointer-events: none;
  animation: snow 20s linear infinite;
}

@keyframes snow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 2000px;
  }
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
for (let i = 0; i < 100; i++) {
  const snow = document.createElement('div');
  snow.classList.add('snow');
  container.appendChild(snow);
}

39. Blinking Cursor Animation:

cssCopy code@keyframes blinking-cursor {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.blinking-cursor {
  animation: blinking-cursor 1s step-end infinite;
}

40. Falling Leaves Animation:

cssCopy code@keyframes falling-leaves {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translateY(1000px) rotate(360deg);
    opacity: 1;
  }
}

.falling-leaf {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('leaf.png');
  background-repeat: no-repeat;
  animation: falling-leaves 10s linear infinite;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
for (let i = 0; i < 20; i++) {
  const leaf = document.createElement('div');
  leaf.classList.add('falling-leaf');
  leaf.style.left = Math.random() * 100 + '%';
  leaf.style.animationDuration = Math.random() * 5 + 5 + 's';
  container.appendChild(leaf);
}

41. Floating Bubbles Animation:

cssCopy code@keyframes floating-bubbles {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating-bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: floating-bubbles 2s ease-in-out infinite;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
for (let i = 0; i < 20; i++) {
  const bubble = document.createElement('div');
  bubble.classList.add('floating-bubble');
  bubble.style.left = Math.random() * 100 + '%';
  bubble.style.animationDelay = Math.random() * 2 + 's';
  container.appendChild(bubble);
}

42. Starry Sky Animation:

cssCopy code@keyframes starry-sky {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.starry-sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('star.png');
  background-repeat: repeat;
  pointer-events: none;
  animation: starry-sky 2s linear infinite;
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
const starrySky = document.createElement('div');
starrySky.classList.add('starry-sky');
container.appendChild(starrySky);

43. Particle Animation:

cssCopy code@keyframes particle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #eaeaea;
  border-radius: 50%;
  animation: particle 1s ease;
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
for (let i = 0; i < 20; i++) {
  const particle = document.createElement('div');
  particle.classList.add('particle');
  particle.style.left = Math.random() * 100 + '%';
  particle.style.top = Math.random() * 100 + '%';
  container.appendChild(particle);
}

44. Rotating Square Animation:

cssCopy code@keyframes rotating-square {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotating-square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #eaeaea;
  animation: rotating-square 2s linear infinite;
}

JavaScript code:

javascriptCopy codeconst container = document.querySelector('.container');
const rotatingSquare = document.createElement('div');
rotatingSquare.classList.add('rotating-square');
container.appendChild(rotatingSquare);

45. Animated Progress Bar:

cssCopy code.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #eaeaea;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar .progress {
  height: 100%;
  background-color: #333;
  width: 0;
  transition: width 0.5s ease;
}

JavaScript code:

javascriptCopy codeconst progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');

function simulateProgress() {
  let width = 0;
  const interval = setInterval(() => {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width += Math.random() * 10;
      if (width > 100) width = 100;
      progress.style.width = width + '%';
    }
  }, 100);
}

simulateProgress();

46. Animated Countdown Timer:

cssCopy code.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #333;
}

.countdown-timer .digit {
  margin: 0 5px;
  width: 50px;
  height: 50px;
  background-color: #eaeaea;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

JavaScript code:

javascriptCopy codeconst countdownTimer = document.querySelector('.countdown-timer');
const digits = countdownTimer.querySelectorAll('.digit');

function startCountdown(duration) {
  let timeLeft = duration;

  const interval = setInterval(() => {
    if (timeLeft < 0) {
      clearInterval(interval);
    } else {
      const minutes = Math.floor((timeLeft / 60) % 60);
      const seconds = Math.floor(timeLeft % 60);
      digits[0].textContent = String(Math.floor(minutes / 10));
      digits[1].textContent = String(minutes % 10);
      digits[2].textContent = String(Math.floor(seconds / 10));
      digits[3].textContent = String(seconds % 10);
      timeLeft--;
    }
  }, 1000);
}

const duration = 120; // 2 minutes
startCountdown(duration);

47. Scroll Reveal Animation:

cssCopy code@keyframes scroll-reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  opacity: 0;
  animation: scroll-reveal 1s ease;
}

JavaScript code:

javascriptCopy codeconst elements = document.querySelectorAll('.scroll-reveal');

function revealElements() {
  elements.forEach(element => {
    const position = element.getBoundingClientRect();
    if (position.top - window.innerHeight < 0) {
      element.classList.add('scroll-reveal');
    }
  });
}

window.addEventListener('scroll', revealElements);

48. Parallax Scrolling Effect:

cssCopy code.parallax {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  overflow: hidden;
  perspective: 1px;
  transform-style: preserve-3d;
}

.parallax-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(-1px) scale(2);
  backface-visibility: hidden;
}

.parallax-content {
  position: relative;
  transform: translateZ(0);
}

HTML code:

htmlCopy code<div class="parallax">
  <div class="parallax-inner">
    <div class="parallax-content">
      <!-- Content goes here -->
    </div>
  </div>
</div>

49. Sticky Footer:

cssCopy codehtml, body {
  height: 100%;
}

.container {
  min-height: 100%;
  position: relative;
}

.content {
  padding-bottom: 100px;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #333;
  color: #fff;
}

HTML code:

htmlCopy code<div class="container">
  <div class="content">
    <!-- Content goes here -->
  </div>
  <div class="footer">
    Footer content
  </div>
</div>

50. Carousel Slider:

cssCopy code.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease;
}

.carousel-slide img {
  width: 33.33%;
  height: 100%;
  object-fit: cover;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
}

.carousel-nav button {
  padding: 5px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-indicators button {
  padding: 5px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

HTML code:

htmlCopy code<div class="carousel">
  <div class="carousel-slide">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
  <div class="carousel-nav">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
  <div class="carousel-indicators">
    <button id="indicator1"></button>
    <button id="indicator2"></button>
    <button id="indicator3"></button>
  </div>
</div>

JavaScript code:

javascriptCopy codeconst carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
const prevButton = document.querySelector('#prev');
const nextButton = document.querySelector('#next');
const indicators = document.querySelectorAll('.carousel-indicators button');

let currentIndex = 0;

function updateCarousel() {
  carouselSlide.style.transform = `translateX(${-currentIndex * 100}%)`;
  carouselImages.forEach(image => image.classList.remove('active'));
  carouselImages[currentIndex].classList.add('active');
  indicators.forEach(indicator => indicator.classList.remove('active'));
  indicators[currentIndex].classList.add('active');
}

function slideToNext() {
  currentIndex++;
  if (currentIndex >= carouselImages.length) {
    currentIndex = 0;
  }
  updateCarousel();
}

function slideToPrev() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = carouselImages.length - 1;
  }
  updateCarousel();
}

function slideToIndicator(event) {
  const target = event.target;
  if (target.tagName === 'BUTTON') {
    currentIndex = Array.from(indicators).indexOf(target);
    updateCarousel();
  }
}

nextButton.addEventListener('click', slideToNext);
prevButton.addEventListener('click', slideToPrev);
carouselSlide.addEventListener('transitionend', () => {
  carouselImages.forEach((image, index) => {
    if (index === currentIndex) {
      image.classList.add('active');
    } else {
      image.classList.remove('active');
    }
  });
});
Array.from(indicators).forEach(indicator => {
  indicator.addEventListener('click', slideToIndicator);
});

updateCarousel();

These are just a few examples of CSS effects you can apply to your elements. Feel free to modify and customize the code to suit your needs.