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

376

#overlay {
    background: #f0f0f0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.circle {
    border-radius: 50%;
}

.bg {
    width: 300px;
    height: 300px;
    background: #000;
    border: solid 5px #0088ff;
}
.outermost {
    width: 255px;
    height: 255px;
    border: solid 10px rgba(0, 0, 0, 0);
    border-bottom: solid 10px #0088ff;
    border-left: solid 10px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 5s linear infinite;
}
.outer {
    width: 250px;
    height: 250px;
    border: solid 5px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.middle {
    width: 215px;
    height: 215px;
    border: solid 12px rgba(0, 0, 0, 0);
    border-bottom: solid 12px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin2 3.5s linear infinite reverse;
}
.middle2 {
    width: 215px;
    height: 215px;
    border: solid 6px rgba(0, 0, 0, 0);
    border-top: solid 6px #005aa8;
    border-right: solid 6px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 3.5s linear infinite reverse;
}
.middle3 {
    width: 205px;
    height: 205px;
    border: solid 30px rgba(0, 0, 0, 0);
    border-top: solid 30px #0088ff4b;
    border-right: solid 30px #0088ff4b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 3.5s linear infinite reverse;
}
.inner {
    width: 140px;
    height: 140px;
    border: solid 5px #0088ff;
    border-bottom: solid 5px rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: spin2 2s linear infinite;
}
.innermost3 {
    width: 35px;
    height: 35px;
    background: #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.innermost2 {
    width: 80px;
    height: 80px;
    border: solid 13px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.innermost {
    width: 115px;
    height: 115px;
    border: solid 13px #0088ff;
    border-top: solid 13px rgba(0, 0, 0, 0);
    border-bottom: solid 13px rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite reverse;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes spin2 {
    0% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

133

J.A.R.V.I.S Animation

By: rald_dev

129

CodePen Home Pure CSS Logo Slider Responsive

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");
}

115

Pure css carousel

By: pixeldev

111

Flickering Animation

By: rald_dev

106

Card

By: pixeldev

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

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

height: 100vh;
    background: #222;
}
.btn{
    --light-color: rgb(69, 252, 151);
    margin: 1rem;
    position:relative;
    appearance: none;
    border: none;
    color: rgb(209, 208, 208);
    padding: 1rem 2rem;
    background-color: #3e3e3e;
    z-index: 2;
    overflow: hidden;
    border-radius: .4rem;
  box-shadow: .5rem .5rem  .5rem #0005;
  transition: .3s;
}

.btn::before{
    position: absolute;
    width: 10rem;
    height: 10rem;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, transparent 0%, transparent 14%, transparent 35%, var(--light-color) 80%, var(--light-color) 100%);
    content: '';
    top: 50%;
    left: 50%;
    transform-origin: bottom center ;
    transform: translate(-50%, -100%) ;
    z-index: -3;
    border-radius: 100%;
    
    animation: button_light_effect 5s linear infinite;
}
.btn_orange::before{animation-delay:.1s;}
.btn_blue::before{animation-delay:.3s;}
.btn_yellow::before{animation-delay:.6s;}
.btn::after{
    position: absolute;
    width: calc(100% - .3rem);
    height: calc(100% - .3rem);
    background-color: #3e3e3e;
    content: '';
    top: 50%;
    left: 50%;
    border-radius: .4rem;
    transform: translate(-50%, -50%);
    z-index: -3;
    transition:  1s ;
}
.btn:hover{
  transform:scale(1.2);
}
.btn:hover, .btn:hover::after {
    cursor: pointer;
    background: #55606a;
    
}
.btn:hover::before{
    animation-duration: .5s;
    
}
.btn_orange{--light-color:rgb(255, 166, 0);}
.btn_blue{--light-color:rgb(0, 183, 255);}
.btn_yellow{--light-color:rgb(235, 255, 16);}
.btn_pink{--light-color:rgb(255, 0, 200);}

@keyframes button_light_effect {
    0%{transform: translate(-50%, -100%) rotate(-180deg);}
    100%{transform: translate(-50%, -100%) rotate(180deg);}
}

Animated Button

By: rald_dev

.body{
        display: flex;
        justify-content: center;
        height: 100vh;
        background: #240229;
    }
    .loader{
        margin-top:8%; 
        position: relative;
        width: 70%;
        height: 70%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
        animation: animate 0.5s linear infinite;
    }
    .loader span{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0); 
        animation: animate 0.5s linear infinite;
    }
    .loader span:nth-child(1){
        filter: blur(5px);
    }
    .loader span:nth-child(2){
        filter: blur(10px);
    }
    .loader span:nth-child(3){
        filter: blur(25px);
    }
    .loader span:nth-child(4){
        filter: blur(50px);
    }
    .loader:after{
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: #240229;
        border-radius: 5%;
    }
    h1{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 12%;
        letter-spacing: 5px;
        color: rgb(196, 146, 230);
        font-family: "Comic Sans MS", cursive, sans-serif;
    }
    q{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 20%;
        color: rgb(196, 146, 230); 
        font-family: "Comic Sans MS", cursive, sans-serif;
    }
    .glow {
        -webkit-animation-duration: 1s;
        -webkit-animation-name: glow;
        -webkit-animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-name: glow;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    
    }
    @-webkit-keyframes glow {
        from { text-shadow: 0 0 0px rgb(196, 146, 230); }
        to { text-shadow: 0 0 20px rgb(196, 146, 230); }
    }

Happy birthday banner

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

.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

Line 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

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: rald_dev

By: pixeldev

By: pixeldev

By: rald_dev

By: pixeldev

By: rald_dev

By: rald_dev

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