The Power of Pure CSS - No JavaScript Needed

<title>Tarot Carousel</title>
    
<div class="banner">
        <div class="slider" style="--quantity: 10">
            <div class="item" style="--position: 1"><img src="https://i.pinimg.com/564x/8f/ee/4a/8fee4a980d3b928d4cfd037efc1be2f2.jpg" alt="Image1"></div>
            <div class="item" style="--position: 2"><img src="https://i.pinimg.com/564x/aa/1a/7d/aa1a7d017683fb8182a440e5fba78533.jpg" alt="Image2"></div>
            <div class="item" style="--position: 3"><img src="https://i.pinimg.com/564x/e6/63/a4/e663a494527494f46c35f606adab0a86.jpg" alt="Image3"></div>
            <div class="item" style="--position: 4"><img src="https://i.pinimg.com/564x/8b/05/13/8b0513271fd36fceaf372d025ccfd3fc.jpg" alt="Image4"></div>
            <div class="item" style="--position: 5"><img src="https://i.pinimg.com/564x/4c/21/be/4c21be899477633bdde244a432c7ae6d.jpg" alt="Image5"></div>
            <div class="item" style="--position: 6"><img src="https://i.pinimg.com/564x/2d/1a/b3/2d1ab30355f384718d7598e8c2099719.jpg" alt="Image6"></div>
            <div class="item" style="--position: 7"><img src="https://i.pinimg.com/564x/a6/7c/f2/a67cf21fb9aca5080ac79c87cc782072.jpg" alt="Image7"></div>
            <div class="item" style="--position: 8"><img src="https://i.pinimg.com/564x/1d/ae/d8/1daed8c5da2dbb1cb2508856731bcb1c.jpg" alt="Image8"></div>
            <div class="item" style="--position: 9"><img src="https://i.pinimg.com/564x/76/12/72/761272bf45fba778dcc4f5080336c6b9.jpg" alt="Image9"></div>
            <div class="item" style="--position: 10"><img src="https://i.pinimg.com/564x/f4/eb/39/f4eb399ebc688229b66c49bead172012.jpg" alt="Image10"></div>
        </div>
</div>

body{
  background-color: black;
}
.banner{
    width: 100%;
    height: 140vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 340px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 20s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }to{
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(550px);
}
.banner .slider .item img{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }

}
@media screen and (max-width: 767px) {
    .banner .slider{
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(180px);
    }
}

47

3D Card Carousel Pure CSS

By: pixeldev

.container {
  width: 20%;
  min-width: 180px;
  margin: 0 auto;
}

a {
  display: block;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  width: 78%;
  position: relative;
  z-index: 10;
  background: lightblue;
  margin: 10px 11%;
}

a:hover {
  background: #87C0D3;
}

span {
  display: block;
  padding: 8px 30px;
  position: relative;
  z-index: 10;
  background: inherit;
  text-align: center;
}

a::before, a::after, span::before, span::after {
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 50%;
  background: inherit;
  z-index: -1;
  background-clip: padding-box;
  border-color: #eee;
  border-style: solid;
  border-width: 0;
}

a::before {
  top: -10px;
  left: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-top-width: 10px;
  border-right-width: 12px;
}

a::after {
  top: -10px;
  right: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-top-width: 10px;
  border-left-width: 12px;
}

span::before {
  top: 50%;
  left: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-bottom-width: 10px;
  border-right-width: 12px;
}

span::after {
  top: 50%;
  right: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-bottom-width: 10px;
  border-left-width: 12px;
}

47

Hexagon button with pure CSS

By: pixeldev

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  body {
    min-height: 100vh;
    background: #000;
  }
  
  .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    animation: color-change 4s infinite;
  }
  
  @keyframes color-change {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
  
  .row {
    display: inline-flex;
    margin-top: -32px;
    margin-left: -50px;
  }
  .row:nth-child(even) {
    margin-left: 1px;
  }
  
  .hexagon {
    position: relative;
    width: 100px;
    height: 110px;
    background: #111;
    margin: 1.5px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 1s;
  }
  
  .hexagon:hover {
    transition: 0s;
    background: cyan;
  }
  
.hexagon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0.015;
  pointer-events: none;
  background: #fff;
  
}
  .hexagon::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
    background: #111;
  }

47

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

.container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    background: #ffffff;
}

h2.title {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 30px;
    color: #222222;
}

h2.title::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 3px;
    left: calc(50% - 25px);
    bottom: 0;
    background: #222222;
}

p {
    position: relative;
    margin: 15px auto;
    font-size: 16px;
    color: #222222;
}

.btn {
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 12px 27px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #999999;
    background: #ffffff;
    border: 3px solid #999999;
    cursor: pointer;
    transition: ease-out 0.5s;
    -webkit-transition: ease-out 0.5s;
    -moz-transition: ease-out 0.5s;
}

.btn.btn-border-1::after,
.btn.btn-border-1::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 0%;
    visibility: hidden;
}

.btn.btn-border-1::after {
    bottom: -3px;
    right: -3px;
    border-left: 3px solid #222222;
    border-bottom: 3px solid #222222;
    transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-1::before {
    top: -3px;
    left: -3px;
    border-top: 3px solid #222222;
    border-right: 3px solid #222222;
    transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-1:hover {
    animation: pulse 1s ease-out .4s;
    color: #222222;
}

.btn.btn-border-1:hover::after,
.btn.btn-border-1:hover::before {
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    visibility: visible;
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::after {
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::before {
    transition: width .1s ease, height .1s ease .1s;
}

.btn.btn-border-2::after,
.btn.btn-border-2::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-2::after {
    top: -3px;
    left: -3px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-2::before {
    bottom: -3px;
    right: -3px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-2:hover {
    color: #222222;
}

.btn.btn-border-2:hover::after,
.btn.btn-border-2:hover::before {
    width: calc(50% + 3px);
    height: calc(50% + 3px);
    border-color: #222222;
}

.btn.btn-border-3::after,
.btn.btn-border-3::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-3::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-3::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-3:hover {
    color: #222222;
}

.btn.btn-border-3:hover::after,
.btn.btn-border-3:hover::before {
    width: 30px;
    height: 30px;
    border-color: #222222;
}

.btn.btn-border-4::after,
.btn.btn-border-4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-4::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-4::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-4:hover {
    color: #222222;
}

.btn.btn-border-4:hover::after,
.btn.btn-border-4:hover::before {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    border-color: #222222;
}

.btn.btn-border-5::after,
.btn.btn-border-5::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-5::after {
    top: 0;
    left: 0;
    border-top: 3px solid transparent;
}

.btn.btn-border-5::before {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid transparent;
}

.btn.btn-border-5:hover {
    color: #222222;
}

.btn.btn-border-5:hover::after,
.btn.btn-border-5:hover::before {
    width: 100%;
    height: 100%;
    border-color: #222222;
}

47

CSS Buttons Hover Effects

By: pixeldev

<main>
  <h1>CSS only accordion, nearly accessible</h1>
    
  <label for="tota11y-open-close">Expand all sections?</label>
    
  <ul class="tota11y-accordion" aria-label="FAQs accordion">
      <li>
         <a href="#acc1" id="#accLink1">Short Item, No Scroll</a>
         <section class="content" id="acc1" aria-labelledby="accLink1">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc2" id="#accLink2">Long Item, Has Scroll, No Focusable Content</a>
          <section class="content" id="acc2" aria-labelledby="accLink2">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc3" id="#accLink3">Long Item, Has Scroll, Focusable Content</a>
          <section class="content" id="acc3" aria-labelledby="accLink3">
              <ul>
                  <li>Item <a href="#">Focusable link</a></li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
  </ul>
</main>

:root {
    --ta11y-open-duration: 0.5s;
}

body {
    font-size: 18px;
    background: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    color: white;
    padding: 30px;
}

a {
    color: white;
}

.tota11y-accordion > li > a {
    padding: 2rem 1.5rem;
    display: block;
    color: white;
    position: relative;
    cursor: pointer;
    outline: transparent;
    text-decoration: none;
}

.tota11y-accordion > li {
    max-width: 800px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 1rem;
    background: #151618;
    box-shadow: 0px 0px 0px 0px #333;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: box-shadow 0.3s 0s ease,
        grid-template-rows var(--ta11y-open-duration);
}
.tota11y-accordion > li:focus-within {
    box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
}
.tota11y-accordion > li:has(.content:target) > a:before,
.tota11y-accordion > li:has(.content:focus-within) > a:before {
    transform: rotate(180deg);
}

.tota11y-accordion > li > a:before {
    content: "";
    opacity: 0.6;
    background-image: url("https://assets.codepen.io/7212043/rounded-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1.8rem;
    right: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 1rem 50%;
    transition: 0.25s transform ease;
}

.tota11y-accordion > li .content {
    border-top: none;
    margin: 0 1rem;
    padding: 0 0.5rem;
    border-top: none;
    color: #a9abb3;
    visibility: hidden;
    display: grid;
    overflow: hidden;
    transition: margin var(--ta11y-open-duration) linear,
        padding var(--ta11y-open-duration) linear;
    max-height: 200px;
}
.tota11y-accordion > li .content::-webkit-scrollbar {
    width: 14px;
}
.tota11y-accordion > li .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.tota11y-accordion > li .content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
}
@keyframes show-scroll {
    0% {
        overflow-y: hidden;
    }
    0.2% {
        overflow-y: auto;
    }
    to {
        overflow-y: auto;
    }
}
.tota11y-accordion > li .content:focus {
    outline: none;
}
.tota11y-accordion > li:has(.content:target),
.tota11y-accordion > li:has(.content:focus-within) {
    grid-template-rows: min-content 1fr;
}
.tota11y-accordion > li:has(.content:target) .content,
.tota11y-accordion > li:has(.content:focus-within) .content {
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll; 
    overflow-y: auto;
    
}

@media (prefers-reduced-motion) {
    :root {
        --ta11y-open-duration: 0s;
    }
    .tota11y-accordion > li:has(.content:target) .content,
    .tota11y-accordion > li:has(.content:focus-within) .content {
        overflow-y: auto;
    }
    .tota11y-accordion > li > a:before {
        transition: none;   
    }
}

label{
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

#tota11y-open-close{
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    accent-color: #555;
}

#tota11y-open-close:checked ~ ul>li{
    grid-template-rows: min-content 1fr;
}

#tota11y-open-close:checked ~ ul>li>.content{
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll;
}

/* we can open all of the accordion items easily with the @media print media query if we wish */
@media print {
    .tota11y-accordion > li {
        grid-template-rows: min-content 1fr;
    }
    .tota11y-accordion > li .content {
        visibility: visible;
        margin: 0.5rem 1rem 2rem 1rem;
        padding: 0.5rem;
        max-height: none;
    }
    /* ideally we would also remove all of the bg-color etc. to save ink, but that is specific to this colour scheme and so not relevant in the demo */
}

47

Animated Pure CSS accordion

By: pixeldev

* {
  margin: 0;
  padding: 0;
}

body {
  background: #333;
}

img {width: 100%; height:auto;}

#wrapper {
  width: 960px;
  margin:0 auto ;
  position:relative;
}

#wrapper p {
  text-align: center;
  color: #fff;
  font-size: 2em;
  font-family: "Arial Black", sans-serif;
  text-shadow: 2px 2px #555;
}

#slideshow {
  border: 1px solid #fff;
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat; /* this default image will show where browsers unable to process the [animation] function */
  background-size: cover;
  height: 425px;  /* animation */
  -webkit-animation: slider 10s infinite ease-in-out;
  -webkit-animation-direction: alternate;
  animation: slider 10s infinite ease-in-out;
  animation-direction: alternate;
}

@-webkit-keyframes slider {
  0% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+1);
  }
  25% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+2);
  }
  50% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+3); 
  }
  100% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+4);
  }
}

@keyframes slider {
  0% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+5);
  }
  25% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+6);
  }
  50% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+7);
  }
  100% {
    background: url(https://dummyimage.com/600x400/000/fff&text=Random+8);
  }
}

.logo {
	position: absolute;
  right:0;
  bottom:0;
}

@media screen and (max-width: 768px) {
  #wrapper {
    width: 100%;
	margin:1em auto;
  }
  
  #wrapper p {
 font-size: 1.25em;
 letter-spacing:0.15em;
 text-shadow: 2px 1px #000;
 overflow:hidden;
 }
  	  
  #slideshow {
    width: 100%;
    height: auto;
    background-size: cover;
  }
  #slideshow img {
    max-width: 100%;
    margin: 0 auto;
  }
}

46

Pure CSS auto-slide image carousel

By: pixeldev

<h1 class="heading1">Our Partners</h1>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>

<div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>
      
    </div>
    
  </div>
  
</div>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip reverse">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
      
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
    </div>
    
  </div>
  
</div>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 versions
*/

/* Base css */
html {
  font-size: 80%;
}
body {
  --body-bg: #eee;
  margin: 0;
  padding: 2rem 2rem 4rem;
  background: var(--body-bg);
  color: #212121;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 125%;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 150%;
  }
}

/* Heading */
.heading1 {
  font-size: 2rem;
  text-align: center;
}

/* reference */
.reference {
  text-align: center;
}

/* reference link */
.reference-link {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Carousel and animation css starts */
.rc-carousel {
  --box-gap: 1.5rem;
  --tile-size: 8rem;
  width: 100%;
  max-width: calc(
    (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1)
  );
  margin: var(--box-gap) auto;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.rc-carousel::before,
.rc-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5rem;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    ,
    from(transparent),
    to(var(--body-bg))
  );
  background-image: -o-linear-gradient(
    var(--direction),
    transparent,
    var(--body-bg)
  );
  background-image: linear-gradient(
    to var(--direction),
    transparent,
    var(--body-bg)
  );
  z-index: inherit;
}
.rc-carousel::before {
  left: 0;
  --direction: left;
}

.rc-carousel::after {
  right: 0;
  --direction: right;
}
.rc-carousel-strip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-animation: slideX 20s linear infinite;
  animation: slideX 20s linear infinite;
}
.rc-carousel-strip.reverse {
  /* reverse animation */
  animation-direction: reverse;
}
.rc-carousel-strip:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.rc-carousel-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--box-gap);
}

.rc-carousel-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--tile-size);
  height: var(--tile-size);
}

.rc-carousel-item-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@-webkit-keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

@keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

/* Animation won't work if you preferes reduced motion */
@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  .rc-carousel::before,
  .rc-carousel::after {
    display: none;
  }
  .rc-carousel-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rc-carousel-box [aria-hidden="true"] {
    display: none;
  }
  .rc-carousel-strip {
    animation: none;
  }
}
/* reduced motion css ends */
/* Carousel and animation css ends */

/* Footer and credits styles */
.footer {
  position: fixed;
  z-index: 99;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background: #fff;
  font-size: 0.75rem;
  text-align: right;
  font-weight: 600;
}

46

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

<div class="cat-container">
  <div class="cat-size cat-one">
    <a class="b" href="https://lenadesign.org/html/" target="_blank">
    <div class="center">
        <h1 class="title-html">HTML</h1></a>
    <p class="textHTML">HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
      <a class="a" href="https://lenadesign.org/html/" target="_blank"><p class="learnHTML">LEARN HTML></p></a>
    </div>
    </div>
  
    <div class="cat-size cat-two">
      <div class="center">
        <a class="b" href="https://lenadesign.org/css/" target="_black">
          <h1 class="title-css">CSS</h1></a>
      <p class="textCSS">CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
        <a class="a" href="https://lenadesign.org/css/" target="_black">
          <p class="learnCSS">LEARN CSS></p></a>
      </div>
    </div>
    <div class="cat-size cat-three">
      <div class="center">
        <a class="b" href="https://lenadesign.org/javascript/" target="_blank">
          <h1 class="title-js">JavaScript</h1></a>
      <p class="textJS">JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</p>
        <a class="a" href="https://lenadesign.org/javascript/" target="_blank">
          <p class="learnJS">LEARN JavaScript></p></a>
      </div>
    </div>
    <div class="cat-size cat-four">
      <div class="center">
        <a class="b" href="https://lenadesign.org/jquery/" target="_blank">
          <h1 class="title-jQ">jQuery</h1></a>
      <p class="textJQ">jQuery is a JavaScript library created to simplify and make it easier to write JavaScript and HTML.</p>
        <a class="a" href="https://lenadesign.org/jquery/" target="_blank">
          <p class="learnJQ">LEARN jQuery></p></a>
      </div>
    </div>
    <div class="cat-size cat-five">
      <div class="center">
        <a class="b" href="https://lenadesign.org/svg-4/" target="_blank">
          <h1 class="title-svg">SVG</h1></a>
      <p class="textSVG">SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.</p>
        <a class="a" href="https://lenadesign.org/svg-4/" target="_blank">
          <p class="learnSVG">LEARN SVG></p></a>
      </div>
    </div>
    <div class="cat-size cat-six">
      <div class="center">
         <a class="b" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
           <h1 class="title-a">Animations</h1></a>
      <p class="textA">Learn how to create amazing animations using HTML, CSS and JavaScript!</p>
        <a class="a" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
          <p class="learnA">Animations></p></a>
      </div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

body {
  margin:0;
  padding:0;
}

.cat-container {
	position: relative;
	height: 100vh;
	width: 100%;
  display: -webkit-flex;
	display: flex;
  font-family: 'Fira Sans', sans-serif;
	overflow: hidden;
  color: white;
}

@media screen and (max-width: 768px) {
  .cat-container {flex-direction: column;}
}

@media screen and (max-width: 480px) {
  .cat-container {flex-direction: column;}
}

.cat-size {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content:center;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
	-moz-transition: flex-grow .3s;
	-ms-transition: flex-grow .3s;
	-o-transition: flex-grow .3s;
  width:100%;
  height: 100vh;
}

.cat-one {
  background-color: #56ab91;
}

.cat-two {
  background-color: #469d89;
}

.cat-three {
  background-color: #4358f80;
}

.cat-three {
  background-color: #358f80;
}

.cat-four {
  background-color: #248277;
}

.cat-five {
  background-color: #14746f;
}

.cat-six {
  background-color: #036666;
}

.cat-one:hover {
  flex-grow: 3;
}

.cat-two:hover {
  flex-grow: 3;
}

.cat-three:hover {
  flex-grow: 3;
}

.cat-four:hover {
  flex-grow: 3;
}

.cat-five:hover {
  flex-grow: 3;
}

.cat-six:hover {
  flex-grow: 3;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2;
  text-align: center;
  width:100%;
  height: 100vh;

}

.title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {
  writing-mode: vertical-rl; 
  margin: 30px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.cat-one:hover .title-html {
  writing-mode: horizontal-tb; 
}

.cat-two:hover .title-css {
  writing-mode: horizontal-tb; 
}

.cat-three:hover .title-js {
  writing-mode: horizontal-tb; 
}

.cat-four:hover .title-jQ {
  writing-mode: horizontal-tb; 
}

.cat-five:hover .title-svg {
  writing-mode: horizontal-tb; 
}

.cat-six:hover .title-a {
  writing-mode: horizontal-tb; 
}

@media screen and (max-width: 768px) {
  .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {writing-mode: horizontal-tb !important; 
  }
  .textHTML, .learnHTML, .textCSS, .learnCSS, .textJS, .learnJS, .learnJQ, .textJQ, .learnA, .textA, .learnSVG, .textSVG {
    display: none !important;
  }
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA, .learnHTML, .learnCSS, .learnJS, .learnJQ, .learnSVG, .learnA {
  display: none;
}

.cat-one:hover .textHTML {
 display: block;
 animation: up .5s ease forwards;
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA {
  width:50%;
  border: 3px solid white;
  border-radius:20px;
  padding:20px;
}

.cat-one:hover .learnHTML {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .learnCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .learnJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .textJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .textCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .textJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .learnJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .learnSVG {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .learnA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .textA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .textSVG {
 display: block;
 animation: up .5s ease forwards;
}

@keyframes up {
  0% {opacity:0; transform: translateY(50px);}
  50% {opacity:0; transform: translateY(50px);}
  100% {{opacity:1; transform: translateY(0px);}}
}

.a {
  text-decoration: underline;
  color: white;
}

.b {
  text-decoration: none;
  color: white;
}

46

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

46

Flip Navbar with Pure CSS

By: pixeldev

.carousel-wrapper {
  width: 520px; /* 400px * 1.3 */
  height: 350px; /* 250px * 1.4 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px; /* 400px * 3 */
  animation: sliding 12s infinite;
}

.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive: max-width 768px */
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px; /* 240px * 1.3 */
    height: 210px; /* 150px * 1.4 */
  }

.carousel-container {
    width: 240px;
    height: 150px;
  }

.carousel {
    width: 720px; /* 240px * 3 */
  }

.carousel div {
    width: 240px;
    height: 150px;
  }

@keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

46

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

html, body {
  margin:0;
  padding:0;
}

.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #cecece;
  box-shadow:0 6px 6px -6px #333;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, pink, red);
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, pink, #65378F);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, #999, #333);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, #cecece, #3366FF);
}

46

100% Responsive Page Example in Pure CSS

By: pixeldev

<ul id="accordion">
		<li>
			<h2>Title One</h2>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
			</div>
		</li>
		<li>
			<h2>Title Two</h2>
			<div class="content">
				Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
			</div>
		</li>
		<li>
			<h2>Title Three</h2>
			<div class="content">
				Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
			</div>
		</li>
		<li>
			<h2>Title Four</h2>
			<div class="content">
				Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</li>
	</ul>

</div>

46

All

3D Card Carousel Pure CSS

By: pixeldev

Hexagon button with pure CSS

By: pixeldev

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

CSS Buttons Hover Effects

By: pixeldev

Animated Pure CSS accordion

By: pixeldev

Pure CSS auto-slide image carousel

By: pixeldev

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

Flip Navbar with Pure CSS

By: pixeldev

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

100% Responsive Page Example in Pure CSS

By: pixeldev

Pure CSS Accordion hover

By: pixeldev