animoxjs/src/Animox.css

it is an library that helps in your easing the web development effects and animations

:root {
  --bgColor: black;
}
/* dark theme */
.dark-theme {
  background-color: #333;
  color: #fff;
}

/* MouseFollower case1 */
.mf{
  background-color: var(--bgColor);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  top: 50%;
  left: 50%;
  z-index: 99999;
  mix-blend-mode: difference;
  transform: translate(-50%,-50%);
  }   
    /* MouseFollower case2 */
  .mf2 {
      pointer-events: none;
      transform: translate(-50%, -50%);
      position: fixed;
      top: -10%;
      left: -10%;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      z-index: 99999;
      mix-blend-mode: exclusion;
      background-color: var(--bgColor);
    }
    
    #behindmouse {
      background-color: white;
      z-index: 9999;
    }
    /* MouseFollower case3 */
    .c{
      width: 30px;
      height: 30px;
      border: 2px solid hsla(0, 85%, 3%, 0.5);
    }
    .inner-circle{
      width: 8px;
      height: 8px;
      background-color: #000;
    }
    .c,.inner-circle{
      position: fixed;
      top: 0;
      left: 0;
      transform: translate(-50%,-50%);
      border-radius:50%;
      z-index: 1;
    }
    /* MouseFollower case4 */
  .c2{
      width: 24px;
      height: 24px;
      border-radius: 24px;
      position: absolute;
      top: 0;
      pointer-events: none;
      left: 0;
  }
   /* MouseFollower case5 */
   
body #cid {
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 110%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  z-index: 100000;
}
body #cid, body .cc3 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 100%;
}
   /* MouseFollower case6 */
   .c4 {
      position: absolute;
      aspect-ratio: 1;
      height: 300px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(to right, #1395d1, #0fc58f);
      filter: blur(200px);
    }
    
/* MouseFollower case7 */
    body .c5 {
      position: fixed;
      height: 35px;
      width: 35px;
      border: 1px solid #000;
      border-radius: 100%;
      top: -20px;
      pointer-events: none;
      left: -20px;
    }
/* MagnetEffect case1 */
    body .Mbtn {
      position: relative;
      width: 200px;
      padding: 15px 20px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      overflow: hidden;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.1em;
      border-radius: 25px;
      color: #fff;
      transition: all 0.3s ease;
      text-decoration: none;
    }
    body .Mbtn:hover span {
      color: white;
    }
    body .Mbtn:hover::before {
      width: 120px;
      height: 120px;
    }
    body .Mbtn::before {
      background-color: var(--clr);
      content: "";
      position: absolute;
      transition: 1s;
      top: var(--y);
      left: var(--x);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      width: 0px;
      height: 0px;
      transition: left 0s, top 0s;
    }
    body .Mbtn span {
      position: relative;
      pointer-events: none;
      color: rgba(255, 255, 255, 0.25);
      transition: 0.5s;
    }
    /* stickyNav case1 */
    body .sticky{
      width: 100%;
      height: 30px;
      padding: 15px 10px;
      background-color: transparent;
      position: fixed;
      color: #000;
      top: 0;
      left: 0;
      margin-bottom: 2%;
    }
/* scrollToTop case1 */
    .stt {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #333;
      color: #fff;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
      border-radius: 10px;
      text-transform: uppercase;
      text-align: center;
      outline: none;
    }
    .stt2 {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #333;
      color: #fff;
      padding: 14px;
      border: none;
      cursor: pointer;
      border-radius: 50%;
      text-align: center;
      outline: none;
    }
    /* scrollToTop case2 */
    .pbc {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background-color: #ddd;
      z-index: 1000;
    }
    .pb {
      height: 100%;
      background-color: #007bff;
      width: 0%;
    }
/* btnHoverEffect case1*/
    .btnEffect1 {
      width: 90px;
      height: 45px;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
      border-radius: 25px;
      cursor: pointer;
      overflow: hidden;
      border: 1px solid rgb(161, 161, 161);
    }
    .btnEffect1::after {
      content: "";
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transition: all 0.3s ease;
      background-color: #110600;
      position: absolute;
      bottom: -100%;
    }
    .btnEffect1:hover::after {
      bottom: 0;
      border-radius: 0;
    }
    .btnEffect1:hover span {
      color: #fff;
      z-index: 99;
    }
    .btnEffect1 span {
      font-size: 1rem;
      font-weight: 580;
    }
    /*ImageTrailEffect*/
    body .hero_media {
      position: fixed;
      -o-object-fit: contain;
         object-fit: contain;
      z-index: 999;
      pointer-events: none;
      transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
      transform: scale(0.5);
    }
    /*OnHover Expand*/
    .ECircle{
      background-color: var(--bgColor);
      width: 45px;
      height: 45px;
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      top: 50%;
      left: 50%;  
      transition: all 0.20s;
      z-index: 9999999;
      mix-blend-mode: difference;
      transform: translate(-50%,-50%);
      }   
      /*Infinite Carousel case1*/
      .ls {
          width: 100%;
          height: 300px; /* Adjust as needed */
          overflow: hidden;
        }
        
        .lc {
          display: flex;
          animation: scrollLogos linear infinite;
        }
        
        .lc img {
          width: auto;
          height: 100%;
          object-fit: contain;
          margin-right: 20px; /* Adjust as needed */
        }
        
        @keyframes scrollLogos {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(calc(-100% - 20px));
          }
        }

        /*Infinite Carousel case2*/
        
.q-scroller {
  width: 100%;
  height: 300px; /* Adjust as needed */
  overflow: hidden;
}

.qc {
  display: flex;
  animation: scrollQuotes linear infinite;
}

.quote {
  flex-shrink: 0;
  font-size: 2.6rem;
  margin-right: 20px; /* Adjust as needed */
}

@keyframes scrollQuotes {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(calc(-100% - 20px));
  }
}
/*TextEffect case1*/
.textEffects .char {
  font-size: 25px;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  opacity: 0; /* Set opacity to 1 to make characters visible */
}


* body .rolling-text {
  display: inline-block;
  font-family: "gilroy";
  font-size: 100px;
  line-height: 100px;
  height: 100px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  color: #fff;
}
* body .rolling-text .block:last-child {
  color: #c93d4b;
}
* body .rolling-text .letter {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  text-transform: uppercase;
}
* body .rolling-text .letter:nth-child(1) {
  transition-delay: 0s;
}
* body .rolling-text .letter:nth-child(2) {
  transition-delay: 0.015s;
}
* body .rolling-text .letter:nth-child(3) {
  transition-delay: 0.02s;
}
* body .rolling-text .letter:nth-child(4) {
  transition-delay: 0.05s;
}
* body .rolling-text .letter:nth-child(5) {
  transition-delay: 0.06s;
}
* body .rolling-text .letter:nth-child(6) {
  transition-delay: 0.075s;
}
* body .rolling-text .letter:nth-child(7) {
  transition-delay: 0.09s;
}
* body .rolling-text .letter:nth-child(8) {
  transition-delay: 0.105s;
}
* body .rolling-text .letter:nth-child(9) {
  transition-delay: 0.12s;
}
* body .rolling-text:hover .letter, * body .rolling-text.play .letter {
  transform: translateY(-100%);
}
/*TextEffect case2*/
.magic {
  background: linear-gradient(to right, rgb(127, 31, 142), rgb(103, 58, 183), rgb(244, 143, 177), rgb(127, 31, 142));
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  background-size: 200%;
  animation: background-pan 3s linear infinite;
  font-weight: 600;
  -webkit-background-clip: text;
}
@keyframes background-pan {
  from {
    background-position: 0% center;
  }
  to {
    background-position: -200% center;
  }
}
/*TextEffect case3*/
.JText{
  font-size: 1.6vw;
  text-transform: uppercase;
  font-weight: 600;
  font-family: sans-serif;
  cursor: pointer;
}
/*TextEffect case4*/
body .txt-line {
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 0px;
}
body .txt-line p {
  font-size: 30px;
  overflow: hidden;
  font-weight: 500;
}
/*TextEffect case5*/
body .TE5 {
  font-size: 130px;
  margin-left: 5%;
  font-family: serif;
}
body .TE5 p {
  background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(37, 37, 37) 50%);
  color: transparent;
  background-size: 200% 100%;
  background-position-x: 100%;
  background-clip: text;
  font-size: 4vw;
  -webkit-background-clip: text;
  margin-left: 50px;
}
/*TextEffect case6*/
.TE6 {
  text-transform: uppercase;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #ccc;
  font-size: 2vw;
  cursor: pointer;
  position: relative;
  white-space: nowrap; /* Ensure text remains in a single line */
}

.TE6:hover:before {
  width: 100%;
  font-size: 100%; /* Adjust font size when hovered */
  transition: all 1.3s;
}

.TE6:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  flex-wrap: nowrap;
  color: #262626;
  width: 0%;
  overflow: hidden;
  transition: 1.3s;
}

/*TextEffect case7*/
body .TE7C {
  margin: 0;
  padding: 0;
  display: inline-block; /* Change to inline-block to prevent full width */
}

body .TE7C .TE7 {
  color: #000;
  font-family: sans-serif;
  font-size: 2vw;
  font-weight: 600;
  letter-spacing: 3px; /* Adjust letter spacing */
  transition: all 0.3s ease;
}

body .TE7C:hover .TE7 {
  animation: animate 2s linear infinite;
  cursor: pointer;
}

@keyframes animate {
  0% {
    transform: rotate(0deg) translateY(0%);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: rotate(45deg) translateY(-50%);
    opacity: 0;
    filter: blur(20px);
  }
}
/*hoverEffect case1*/
.btnE1 {
  border: 1px solid #3498db;
  background-color: none;
  padding: 10px 20px;
  width: 120px;
  font-size: 23px;
  text-transform: capitalize;
  font-family: sans-serif;
  overflow: hidden;
  z-index: 9;
  cursor: pointer;
  position: relative;
  /* margin: 10px; */
}
.btnE1::before {
  width: 100%;
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  transition: 0.8s;
  background-color: #3498db;
  height: 0;
}
.btnM1{
  color: #3498db;
}
.btnM1:hover{
  color: #fff;
}
.btnM1:hover::before{
  height: 180%;
}
.btnM1::before{
  top: 0;
  border-radius: 0 0 50% 50%;
}

/*hoverEffect case2*/
.btnE5 {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  cursor: pointer;
  background-color: none;
  outline: none;
  position: relative;
  border: none;
}
.btnE5::after {
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  height: 0.175rem;
  background-color: crimson;
  position: absolute;
}
  /*hoverEffect case3*/
.btn-center:hover::after {
  cursor: pointer;
  transform: scale(1, 1);
}

.btn-center::after {
  transform: scale(0, 1);
  cursor: pointer;
  transition: transform 0.3s ease;
}
  /*hoverEffect case4*/
.btn-left:hover::after {
  cursor: pointer;
  transform: scale(1, 1);
}
.btn-left::after {
  transform: scale(0, 1);
  transform-origin: 0% 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}
    /*hoverEffect case5*/
.btn-bottom:hover::after {
  cursor: pointer;
  transform: scale(1, 1);
}
.btn-bottom::after {
  transform: scale(1, 0);
  cursor: pointer;
  transition: transform 0.3s ease;
}
    /*hoverEffect case6*/
.btn-right:hover::after {
  cursor: pointer;
  transform: scale(1, 1);
}
.btn-right::after {
  transform: scale(0, 1);
  transform-origin: 100% 0%;
  cursor: pointer;
  transition: transform 0.3s ease;
}
/* Image Slider case1 */
.slider-container {
  width: 60%;
  height: 500px; /* Adjust height as needed */
  overflow: hidden;
  position: relative;
}

.slider {
  width: 100%;
  height: 100%;
  display: flex;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

#prevBtn, #nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(20, 20, 20, 0.5);
  color: white;
  border-radius: 50%;
  text-align: center;
  outline: none;
  border: none;
  font-size: 1.2vw;
  line-height: 50px;
  cursor: pointer;
  z-index: 1;
}
#nextBtn{
  right: 0;
}

.arrow.left {
  left: 0;
}

.arrow.right {
  right: 0;
}
/* Image Slider case2 */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}