Unleash Your Creativity. Code, Test, & Share!

Discover the ultimate playground for developers. Write, run, and collaborate on code—instantly. Whether you’re building, learning, or experimenting, our platform brings your ideas to life.

Popular Categories

Accordion

Buttons

Popular Css Element

283

CodePen Home Pure CSS Logo Slider Responsive

By: pixeldev

Flickering Animation

By: rald_dev

Card

By: pixeldev

<h1>CSS-only Carousel</h1>

<p>This carousel is created with HTML and CSS only.</p>

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
        <a href="#carousel__slide4"
           class="carousel__prev">Go to last slide</a>
        <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
      </div>
    </li>
    <li id="carousel__slide2"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide1"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide3"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide2"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide4"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide3"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1"
         class="carousel__next">Go to first slide</a>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1"
           class="carousel__navigation-button">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2"
           class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3"
           class="carousel__navigation-button">Go to slide 3</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4"
           class="carousel__navigation-button">Go to slide 4</a>
      </li>
    </ol>
  </aside>
</section>

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 37.5rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 75%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

.carousel__slide:nth-child(even) {
  background-color: #99f;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

.carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

Pure css carousel

By: pixeldev

.spinnerContainer {
     height:40px;
     width:40px;
     position:relative;
     margin:100px auto 0 auto;
 }
.spinnerContainer div {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #c1bebe;
    position: absolute;
    top: 0;
    left: 0;
}
 .spinnerContainer .ball1 {
     background:red;
     z-index:1;
     -moz-animation: spinner1 4s infinite ease-in-out;
     -webkit-animation: spinner1 4s infinite ease-in-out;
 }
.spinnerContainer .ball2 {
    transform: translate(30px,0);
    -moz-animation: spinner2 4s infinite ease-in-out;
    -webkit-animation: spinner2 4s infinite ease-in-out;
}
.spinnerContainer .ball3 {
    transform: translate(30px, 30px);
    -moz-animation: spinner3 4s infinite ease-in-out;
    -webkit-animation: spinner3 4s infinite ease-in-out;
}
.spinnerContainer .ball4 {
    transform: translate(0,30px);
    -moz-animation: spinner4 4s infinite ease-in-out;
    -webkit-animation: spinner4 4s infinite ease-in-out;
}
.spinnerContainer .ball5 {
    -moz-animation: spinner5 4s infinite ease-in-out;
    -webkit-animation: spinner5 4s infinite ease-in-out;
}

@-moz-keyframes spinner1 {
    0%  {-moz-transform: translate(0,0);}
    12.5% {-moz-transform: translate(30px,0);}
    25% {-moz-transform: translate(30px,30px);}
    37.5% {-moz-transform: translate(0,30px);}
    50% {-moz-transform: translate(0,0);}
    62.5% {-moz-transform: translate(30px,0);}
    75% {-moz-transform: translate(30px,30px);}
    87.5% {-moz-transform: translate(0,30px);}
    100% {-moz-transform: translate(0,0);};
}
@-webkit-keyframes spinner1 {
    0%  {-webkit-transform: translate(0,0);}
    12.5% {-webkit-transform: translate(30px,0);}
    25% {-webkit-transform: translate(30px,30px);}
    37.5% {-webkit-transform: translate(0,30px);}
    50% {-webkit-transform: translate(0,0);}
    62.5% {-webkit-transform: translate(30px,0);}
    75% {-webkit-transform: translate(30px,30px);}
    87.5% {-webkit-transform: translate(0,30px);}
    100% {-webkit-transform: translate(0,0);};
}
@-moz-keyframes spinner2 {
    0%  {-moz-transform: translate(30px,0);}
    12.5% {-moz-transform: translate(30px,0);}
    25% {-moz-transform: translate(30px,30px);}
    37.5% {-moz-transform: translate(0,30px);}
    50% {-moz-transform: translate(0,0);}
    62.5% {-moz-transform: translate(30px,0);}
    75% {-moz-transform: translate(30px,0);}
    87.5% {-moz-transform: translate(30px,0);}
    100% {-moz-transform: translate(30px,0);};
}
@-webkit-keyframes spinner2 {
    0%  {-webkit-transform: translate(30px,0);}
    12.5% {-webkit-transform: translate(30px,0);}
    25% {-webkit-transform: translate(30px,30px);}
    37.5% {-webkit-transform: translate(0,30px);}
    50% {-webkit-transform: translate(0,0);}
    62.5% {-webkit-transform: translate(30px,0);}
    75% {-webkit-transform: translate(30px,0);}
    87.5% {-webkit-transform: translate(30px,0);}
    100% {-webkit-transform: translate(30px,0);};
}
@-moz-keyframes spinner3 {
    0%  {-moz-transform: translate(30px,30px);}
    12.5% {-moz-transform: translate(30px,30px);}
    25% {-moz-transform: translate(30px,30px);}
    37.5% {-moz-transform: translate(0,30px);}
    50% {-moz-transform: translate(0,0);}
    62.5% {-moz-transform: translate(30px,0);}
    75% {-moz-transform: translate(30px,30px);}
    87.5% {-moz-transform: translate(30px,30px);}
    100% {-moz-transform: translate(30px,30px);};
}
@-webkit-keyframes spinner3 {
    0%  {-webkit-transform: translate(30px,30px);}
    12.5% {-webkit-transform: translate(30px,30px);}
    25% {-webkit-transform: translate(30px,30px);}
    37.5% {-webkit-transform: translate(0,30px);}
    50% {-webkit-transform: translate(0,0);}
    62.5% {-webkit-transform: translate(30px,0);}
    75% {-webkit-transform: translate(30px,30px);}
    87.5% {-webkit-transform: translate(30px,30px);}
    100% {-webkit-transform: translate(30px,30px);};
}
@-moz-keyframes spinner4 {
    0%  {-moz-transform: translate(0,50px);}
    12.5% {-moz-transform: translate(0,50px);}
    25% {-moz-transform: translate(0,50px);}
    37.5% {-moz-transform: translate(0,50px);}
    50% {-moz-transform: translate(0,0);}
    62.5% {-moz-transform: translate(50px,0);}
    75% {-moz-transform: translate(50px,50px);}
    87.5% {-moz-transform: translate(0,50px);}
    100% {-moz-transform: translate(0,50px);};
}
@-webkit-keyframes spinner4 {
    0%  {-webkit-transform: translate(0,30px);}
    12.5% {-webkit-transform: translate(0,30px);}
    25% {-webkit-transform: translate(0,30px);}
    37.5% {-webkit-transform: translate(0,30px);}
    50% {-webkit-transform: translate(0,0);}
    62.5% {-webkit-transform: translate(30px,0);}
    75% {-webkit-transform: translate(30px,30px);}
    87.5% {-webkit-transform: translate(0,30px);}
    100% {-webkit-transform: translate(0,30px);};
}
@-moz-keyframes spinner5 {
    0%  {-moz-transform: translate(0,0);}
    12.5% {-moz-transform: translate(30px,0);}
    25% {-moz-transform: translate(30px,30px);}
    37.5% {-moz-transform: translate(0,30px);}
    50% {-moz-transform: translate(0,0);}
    62.5% {-moz-transform: translate(0,0);}
    75% {-moz-transform: translate(0,0);}
    87.5% {-moz-transform: translate(0,0);}
    100% {-moz-transform: translate(0,0);};
}
@-webkit-keyframes spinner5 {
    0%  {-webkit-transform: translate(0,0);}
    12.5% {-webkit-transform: translate(30px,0);}
    25% {-webkit-transform: translate(30px,30px);}
    37.5% {-webkit-transform: translate(0,30px);}
    50% {-webkit-transform: translate(0,0);}
    62.5% {-webkit-transform: translate(0,0);}
    75% {-webkit-transform: translate(0,0);}
    87.5% {-webkit-transform: translate(0,0);}
    100% {-webkit-transform: translate(0,0);};
}

Box dots animation

By: rald_dev

body {
  background: #0a3f63;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 250px;
  width: 250px;
  position: relative;
}
.circle {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  animation: rotate 3s linear infinite;
}
.circle::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 50px;
  background-color: #fff;
  border-radius: 5px;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.ball {
  position: absolute;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #fe95ff;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: move 1.5s ease-in alternate infinite;
}

@keyframes rotate {
  from {
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes move {
  from {
    box-shadow: 0 10px 0 -1px #fe95ffaa, 0 20px 0 -2px #fe95ffaa;
  }
  to {
    top: 220px;
    box-shadow: 0 -10px 0 -1px #fe95ffaa, 0 -20px 0 -2px #fe95ff55;
  }
}

Bouncing ball v2

By: rald_dev

/* Modifier */
.c-tbl--purple th {
	background-color: hsl(330, 50%, 40%)
}
.c-tbl--purple td {
  border-color: hsl(330, 40%, 80%);
}
.c-tbl--purple tr th:last-of-type {
  border-inline-color: hsl(330, 50%, 40%);
}
.c-tbl--purple tr th:first-of-type {
  border-inline-start-color: hsl(330, 50%, 40%);
}
@media (hover: hover) {
  .c-tbl--purple tr:hover td {
		background-color: hsl(330, 60%, 95%);
  }
}

/**
 * c-tbl.css
 * @version 1.0.0
 * @description Generic Table Component
*/
:where(.c-tbl) {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 99.9%;
}

:where(.c-tbl thead th) {
  background-color: hsl(200, 60%, 40%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 0;
  border-inline-start-width: 0;
  color: hsl(200, 60%, 99%);
  padding-block: 1.25ch;
  padding-inline: 2ch;
  text-transform: uppercase;
}

:where(.c-tbl td) {
  background-color: #FFF;
  border-color: hsl(200, 60%, 80%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 1px;
  border-inline-start-width: 0;
  padding-block: 1.25ch;
  padding-inline:	2ch;
}

/* Because of `border-collapse: separate`, we need to  */
:where(.c-tbl tr td:first-of-type) {
  border-inline-start-width: 1px;
}
/* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */
:where(.c-tbl tr th:last-of-type) {
  border-inline-color: hsl(200, 60%, 40%);
}
:where(.c-tbl tr th:first-of-type) {
  border-inline-start-color: hsl(200, 60%, 40%);
}
/* Set `border-radius` on first and last rows, on first and last cell */
:where(.c-tbl thead th:first-of-type) {
  border-start-start-radius: 0.5rem;
}
:where(.c-tbl thead th:last-of-type) {
  border-start-end-radius: 0.5rem;
}
:where(.c-tbl tbody tr:last-of-type td:first-of-type) {
  border-end-start-radius: 0.5rem;
}
:where(.c-tbl tr:last-of-type td:last-of-type) {
  border-end-end-radius: 0.5rem;
}

/*
=====
HOVER
=====
*/
@media (hover: hover) {
  :where(.c-tbl) tr:hover td {
		background-color: hsl(200, 60%, 95%);
  }
}

/* For demo */
body {
  font-family: ui-sans-serif, sans-serif;
  margin-block: 2ch;
  margin-inline: auto;
  max-inline-size: 64rem;
  padding-inline: 2ch;
}

button {
  padding: 1ch 2ch;
}

Basic Table with rounded corners

By: pixeldev

Line Animation

By: rald_dev

Wavy text animation

By: rald_dev

<section class="">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 col-xs-12">
					<ul class="book-paging-animation">
						<li>
							<figure class="book">
								
								<ul class="book-cover-front">
									<li>
									</li>
									<li></li>
								</ul>
								
								<ul class="pages-inner">
									<li></li>
									<li>
										<a class="btn" href="web-design-company.html">Read More</a>
									</li>
									<li>
										
									</li>
									<li></li>
									<li></li>
								</ul>
								
								<ul class="book-cover-back">
									<li></li>
									<li></li>
								</ul>
								<ul class="book-line">
									<li></li>
									<li></li>
								</ul>
							</figure>
						</li>
					</ul>
        
        	<ul class="book-paging-animation">
						<li>
							<figure class="book">
								
								<ul class="book-cover-front">
									<li>
									<h2>
                    Anniversary celebration
                    </h2>
									</li>
									<li></li>
								</ul>
								
								<ul class="pages-inner">
									<li></li>
									<li>
										<a class="btn" href="web-design-company.html">Read More</a>
									</li>
									<li>
										
									</li>
									<li></li>
									<li></li>
								</ul>
								
								<ul class="book-cover-back">
									<li></li>
									<li></li>
								</ul>
								<ul class="book-line">
									<li></li>
									<li></li>
								</ul>
							</figure>
						</li>
					</ul>
			</div>
		</div>
	</div>
</section>

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.btn {
    display: inline-block;
    text-transform: uppercase;
    border: 2px solid #2c3e50;
    margin-top: 100px;
    font-size: 0.7em;
    font-weight: 700;
    padding: 0.1em 0.4em;
    text-align: center;
  text-decoration:none;
    transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
    border-color: #c32b23;
    border-color: #c32b23;
    color: #c32b23;
}

.book-paging-animation{
   text-align: center;
   max-width: 700px;
    margin: 0 auto;
   > li {
    width: 500px;
    min-height: 300px;
    display: inline-block;
   
    vertical-align: top;
   
}

}
.book {
   position: relative;
    width: 160px;
    height: 220px;
    margin: 50px auto;
    perspective: 1000px;
    transform-style: preserve-3d;
 
   
}

.book-cover-front li:first-child {
    background-color: #eee;
    backface-visibility: hidden;
 
}

.book-cover-front li:last-child {
    background: #fffbec;
}

.book-cover-back li:first-child {
    background: #fffbec;
}

.book-cover-back li:last-child {
    background: #fffbec;
}

.book-line li:first-child {
    background: #eee;
}

.book-line li:last-child {
    background: #333;
}

.book-cover-front li:first-child:after,
.book-cover-front li:first-child:before,
.book-cover-front li:last-child:after,
.book-cover-front li:last-child:before,
.book-cover-back li:first-child:after,
.book-cover-back li:first-child:before,
.book-cover-back li:last-child:after,
.book-cover-back li:last-child:before,
.book-line li:first-child:after,
.book-line li:first-child:before,
.book-line li:last-child:after,
.book-line li:last-child:before {
    background: #999;
}

.pages-inner > li {
        background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);

box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
    border-radius: 0px 5px 5px 0px;
}

.book-cover-front {
    transform: rotateY(-34deg) translateZ(8px);
    z-index: 100;
 
}

.book-cover-back {
    transform: rotateY(-15deg) translateZ(-8px);
}

.pages-inner li:nth-child(1) {
    transform: rotateY(-28deg);
}

.pages-inner li:nth-child(2) {
    transform: rotateY(-30deg);
}

.pages-inner li:nth-child(3) {
    transform: rotateY(-32deg);
}

.pages-inner li:nth-child(4) {
    transform: rotateY(-34deg);
}

.pages-inner li:nth-child(5) {
    transform: rotateY(-36deg);
}

.book-cover-front,
.book-cover-back,
.book-line,
.book-cover-front li,
.book-cover-back li,
.book-line li {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.book-cover-front,
.book-cover-back {
    transform-origin: 0% 100%;
}

.book-cover-front {
    transition: all 0.8s ease, z-index 0.6s;
  
}

.book-cover-front li:first-child {
    transform: translateZ(2px);
}

.book-cover-front li:last-child {
    transform: rotateY(180deg) translateZ(2px);
}

.book-cover-back li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.book-cover-back li:last-child {
    transform: translateZ(-2px);
}

.book-cover-front li:first-child:after,
.book-cover-front li:first-child:before {
    width: 4px;
    height: 100%;
}

.book-cover-front li:first-child:after {
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book-cover-front li:first-child:before {
    transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.book-cover-front li:last-child:after,
.book-cover-front li:last-child:before {
    width: 4px;
    height: 160px;
}

.book-cover-front li:last-child:after {
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}

.book-cover-front li:last-child:before {
    box-shadow: 0px 0px 30px 5px #333;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

.book-cover-back li:first-child:after,
.book-cover-back li:first-child:before {
    width: 4px;
    height: 100%;
}

.book-cover-back li:first-child:after {
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book-cover-back li:first-child:before {
    transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.book-cover-back li:last-child:after,
.book-cover-back li:last-child:before {
    width: 4px;
    height: 160px;
}

.book-cover-back li:last-child:after {
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.book-cover-back li:last-child:before {
    box-shadow: 10px -1px 80px 20px #666;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

.book-line {
    transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    width: 16px;
    z-index: 0;
}

.book-line li:first-child {
    transform: translateZ(2px);
}

.book-line li:last-child {
    transform: translateZ(-2px);
}

.book-line li:first-child:after,
.book-line li:first-child:before {
    width: 4px;
    height: 100%;
}

.book-line li:first-child:after {
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book-line li:first-child:before {
    transform: rotateY(-90deg) translateZ(-12px);
}

.book-line li:last-child:after,
.book-line li:last-child:before {
    width: 4px;
    height: 16px;
}

.book-line li:last-child:after {
    transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book-line li:last-child:before {
    box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.pages-inner,
.pages-inner > li {
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
}

.pages-inner {
    width: 100%;
    height: 98%;
    top: 1%;
    left: 3%;
    z-index: 10;
}

.pages-inner > li {
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transition-property: transform;
    transition-timing-function: ease;
}

.pages-inner > li:nth-child(1) {
    transition-duration: 0.6s;
}

.pages-inner > li:nth-child(2) {
    transition-duration: 0.6s;
}

.pages-inner > li:nth-child(3) {
    transition-duration: 0.4s;
}

.pages-inner > li:nth-child(4) {
    transition-duration: 0.5s;
}

.pages-inner > li:nth-child(5) {
    transition-duration: 0.6s;
}

.book:hover > .book-cover-front {
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}

.book:hover > .pages-inner li:nth-child(1) {
    transform: rotateY(-30deg);
    transition-duration: 1.5s;
}

.book:hover > .pages-inner li:nth-child(2) {
    transform: rotateY(-35deg);
    transition-duration: 1.8s;
}

.book:hover > .pages-inner li:nth-child(3) {
    transform: rotateY(-118deg);
    transition-duration: 1.6s;
}

.book:hover > .pages-inner li:nth-child(4) {
    transform: rotateY(-130deg);
    transition-duration: 1.4s;
}

.book:hover > .pages-inner li:nth-child(5) {
    transform: rotateY(-140deg);
    transition-duration: 1.2s;
}

Book page animation

By: rald_dev

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #1c1f2f;
}

.container{
	position: relative;
	-webkit-box-reflect: below 1px linear-gradient(transparent,#0001);
}

.container .loader{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 20px solid transparent;
	border-bottom: 20px solid #06c8f0;
	border-right: 20px solid #06c8f0;
	transform: rotate(45deg);
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(90deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: animateBell 4s ease-in-out infinite;
}

@keyframes animateBell{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(180deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball:before{
	content: '';
	position: absolute;
	bottom: 50%;
	right: 15px;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
}

Perpetual Animation

By: rald_dev

113

UI Elements Made by Community

100%

Available for both personal and commercial use at no cost.

5

Contributors to the community

Top Creators

jusar

Elements Created: 4

Unleash Your Creativity. Code, Test, & Share!

Subscribe Us

Popular Categories

Popular Css Element

By: pixeldev

By: pixeldev

By: rald_dev

By: pixeldev

By: pixeldev

By: rald_dev

By: rald_dev

By: pixeldev

By: rald_dev

By: rald_dev

By: rald_dev

By: rald_dev

113

100%

5

Top Creators

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev

jusar

pixeldev

rald_dev