Css Code Only Pixeldev Code

377

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

134

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

By: rald_dev

130

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

118

Pure css carousel

By: pixeldev

114

Flickering Animation

By: rald_dev

108

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

102

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

99

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

98

Perpetual Animation

By: rald_dev

98

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

97

Box dots 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,
.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 {
    position: absolute;
    top: 0;
    left: 0;
}

.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;
}

97

All

Button

By: pixeldev

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

By: rald_dev

CodePen Home Pure CSS Logo Slider Responsive

By: pixeldev

Pure css carousel

By: pixeldev

Flickering Animation

By: rald_dev

Card

By: pixeldev

Animated Button

By: rald_dev

Happy birthday banner

By: rald_dev

Perpetual Animation

By: rald_dev

Line Animation

By: rald_dev

Box dots animation

By: rald_dev

Book page animation

By: rald_dev