Css Code Only Pixeldev Code »

482

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

281

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

By: rald_dev

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

244

Pure css carousel

By: pixeldev

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

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  background-color: #111;
}

/* Style One */
.one {
  width: 100px;
  transform-origin: center;
  animation: rotate 4s linear infinite;
}

.one circle {
  fill: none;
  stroke: red;
  stroke-width: 10;
  stroke-dasharray: 1, 20;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.lines {
  width: 100px;
  height: 100px;
  position: relative;
}

/* Style Two */

.l2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l2 .line {
  height: 20px;
  width: 4px;
  background-color: #fff;
  animation: topBottom 800ms linear infinite;
}

.l2 .line:nth-child(1) {
  animation-delay: 0s;
}

.l2 .line:nth-child(2) {
  animation-delay: 0.2s;
}

.l2 .line:nth-child(3) {
  animation-delay: 0.4s;
}

.l2 .line:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes topBottom {
  0% {
    transform: translateY(0px);
  }

25% {
    transform: translateY(40px);
  }

75% {
    transform: translateY(-40px);
  }

100% {
    transform: translateY(0px);
  }
}

/* Style Three*/

.l3 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l3 .line {
  height: 0px;
  width: 4px;
  left: 0px;
  background-color: #fff;
  animation: expand 900ms ease infinite;
}

.l3 .line:nth-child(1) {
  animation-delay: 0s;
}

.l3 .line:nth-child(2) {
  animation-delay: 0.2s;
}

.l3 .line:nth-child(3) {
  animation-delay: 0.4s;
}

.l3 .line:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes expand {
  0%,
  100% {
    height: 0px;
  }

50% {
    height: 40px;
  }
}

/* Style Four*/

.l4 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l4 .line {
  height: 2px;
  width: 4px;
  background-color: #fff;
  transform-origin: bottom;
  animation: expandTop 900ms ease infinite;
}

.l4 .line:nth-child(1) {
  animation-delay: 0s;
}

.l4 .line:nth-child(2) {
  animation-delay: 0.2s;
}

.l4 .line:nth-child(3) {
  animation-delay: 0.4s;
}

.l4 .line:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes expandTop {
  0%,
  100% {
    transform: scaleY(1);
  }

50% {
    transform: scaleY(20);
  }
}

/* Style five*/

.l5 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l5 .line {
  height: 20px;
  width: 4px;
  background-color: orange;
  animation: blink 1s ease infinite;
}

.l5 .line:nth-child(1),
.l5 .line:nth-child(10) {
  animation-delay: 0.8s;
}

.l5 .line:nth-child(2),
.l5 .line:nth-child(9) {
  animation-delay: 0.6s;
}

.l5 .line:nth-child(3),
.l5 .line:nth-child(8) {
  animation-delay: 0.4s;
}

.l5 .line:nth-child(4),
.l5 .line:nth-child(7) {
  animation-delay: 0.2s;
}

.l5 .line:nth-child(6),
.l5 .line:nth-child(5) {
  animation-delay: 0s;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }

50% {
    opacity: 1;
  }
}

/* Style Six*/

.l6 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  position: relative;
  height: 20px;
  background-color: blue;
}

.l6 .line:nth-child(1) {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10px;
  width: 100%;
  background-color: #fff;
  animation: expandRight 2s ease infinite;
}

.l6 .line:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
  height: 10px;
  width: 100%;
  animation: expandLeft 2s ease infinite;
  background-color: #fff;
}

@keyframes expandRight {
  0% {
    transform-origin: left;
    transform: translateX(0%);
  }

50% {
    transform: translateX(-100%);
  }

100% {
    transform: translateX(0%);
  }
}

@keyframes expandLeft {
  0% {
    transform-origin: right;
    transform: translateX(100%);
  }

50% {
    transform: translateX(0%);
    transform-origin: left;
  }

100% {
    transform: translateX(100%);
  }
}

/* Style Seven */

.l7 {
  position: relative;
  width: 80px;
  height: 80px;
  animation: 900ms linear rotateMain infinite;
}

.l7 .line {
  position: absolute;
  background-color: #fff;
}

.l7 .line:nth-child(1) {
  left: 0;
  top: 40px;
  animation: 600ms ease-in growWidth infinite;
}
.l7 .line:nth-child(2) {
  right: 0;
  top: 40px;
  animation: 600ms ease-in growWidth infinite;
}
.l7 .line:nth-child(3) {
  left: 40px;
  animation: 600ms ease-in growHeight infinite;
}
.l7 .line:nth-child(4) {
  left: 40px;
  bottom: 0px;
  animation: 600ms ease-in growHeight infinite;
}

@keyframes growHeight {
  0%,
  100% {
    height: 0px;
    width: 2px;
  }
  50% {
    height: 40px;
    width: 2px;
  }
}

@keyframes growWidth {
  0%,
  100% {
    width: 0px;
    height: 2px;
  }
  50% {
    width: 40px;
    height: 2px;
  }
}

@keyframes rotateMain {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Style Eight*/

.l8 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l8 .line {
  height: 20px;
  width: 4px;
  background-color: rgb(255, 0, 76);
  animation: growLine 1s ease infinite;
}

.l8 .line:nth-child(1),
.l8 .line:nth-child(10) {
  animation-delay: 0.8s;
}

.l8 .line:nth-child(2),
.l8 .line:nth-child(9) {
  animation-delay: 0.6s;
}

.l8 .line:nth-child(3),
.l8 .line:nth-child(8) {
  animation-delay: 0.4s;
}

.l8 .line:nth-child(4),
.l8 .line:nth-child(7) {
  animation-delay: 0.2s;
}

.l8 .line:nth-child(6),
.l8 .line:nth-child(5) {
  animation-delay: 0s;
}

@keyframes growLine {
  0%,
  100% {
    transform: scale(0);
  }

50% {
    transform: scale(1.5);
  }
}

.circle-loader {
  width: 80px;
  height: 80px;
  border: 8px solid #333;
  border-top: 8px solid red;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

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

224

8 Pre loader animation using css

By: rald_dev

212

Bouncing ball

By: rald_dev

207

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

206

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

200

Perpetual Animation

By: rald_dev

<div class="container red topBotomBordersOut">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container purple topBotomBordersIn">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container indigo topLeftBorders">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container blue circleBehind">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container cyan brackets">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container teal borderYtoX">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container green borderXwidth">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container lightGreen pullDown">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container lime pullUp">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container yellow pullRight">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container amber pullLeft">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container orange pullUpDown">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container deepOrange pullRightLeft">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container brown highlightTextOut">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

<div class="container gray highlightTextIn">
  <a>HOME</a>
  <a>ARTICLES</a>
  <a>PORTFOLIO</a>
  <a>ABOUT</a>
  <a>CONTACT</a>
</div>

html, body
{
    margin: 0px;
}

header, footer
{
    font-family: Raleway;
    margin: 0 auto;
	padding: 5em 3em;
	text-align: center;
    background: #555;
}

header h1
{
    color: #AAA;
    font-size: 40px;
    font-weight: lighter;
    margin-bottom: 5px;
}

header span
{
    color: #222;
}

footer span
{
  color: #AAA;
}

div.container
{
    font-family: Raleway;
    margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
}

div.container a
{
    color: #FFF;
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.red
{
    background: #f44336;
}

.purple
{
    background: #673ab7;
}

.indigo
{
    background: #3f51b5;
}

.blue
{
    background: #2196f3;
}

.cyan
{
    background: #00bcd4;
}

.teal
{
    background: #009688;
}

.green
{
    background: #4caf50;
}

.lightGreen
{
    background: #8bc34a;
}

.lime
{
    background: #c0ca33;
}

.yellow
{
    background: #fdd835;
}

.amber
{
    background: #ffc107;
}

.orange
{
    background: #ff9800
}

.deepOrange
{
    background: #ff5722;
}

.brown
{
    background: #795548;
}

.gray
{
    background: #9e9e9e;
}

/* Top and Bottom borders go out */
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 0px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top and Bottom borders come in */
div.topBotomBordersIn a:before, div.topBotomBordersIn a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersIn a:before
{
    top: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersIn a:after
{
    bottom: 0px;
    transform: translateY(10px);
}

div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top border go down and Left border appears */
div.topLeftBorders a:before
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2px;
    height: 0px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:after
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:hover:before
{
    height: 100%;
}

div.topLeftBorders a:hover:after
{
    opacity: 0;
    top: 100%;
}

/* Circle behind */
div.circleBehind a:before, div.circleBehind a:after
{
    position: absolute;
    top: 22px;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 4px solid #0277bd;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    border-radius: 50%;
    background: transparent;
    content: "";
    opacity: 0;
    transition: all 0.3s;
    z-index: -1;
}

div.circleBehind a:after
{
    border-width: 2px;
    transition: all 0.4s;
}

div.circleBehind a:hover:before
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

div.circleBehind a:hover:after
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */
div.brackets a:before, div.brackets a:after
{
    position: absolute;
    opacity: 0;
    font-size: 35px;
    top: 0px;
    transition: all 0.3s;
}

div.brackets a:before
{
    content: '(';
    left: 0px;
    transform: translateX(10px);
}

div.brackets a:after
{
    content: ')';
    right: 0px;
    transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
    opacity: 1;
    transform: translateX(0px);
}

/* Border from Y to X  */
div.borderYtoX a:before, div.borderYtoX a:after
{
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderYtoX a:before
{
    left: 0px;
    top: 0px;
}

div.borderYtoX a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
    opacity: 1;
    height: 2px;
    width: 100%;
}

/* Border X get width  */
div.borderXwidth a:before, div.borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

div.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}

/* Pull down  */
div.pullDown a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullDown a:hover:before
{
    height: 100%;
}

/* Pull up  */
div.pullUp a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    bottom: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUp a:hover:before
{
    height: 100%;
}

/* Pull right  */
div.pullRight a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRight a:hover:before
{
    width: 100%;
}

/* Pull left  */
div.pullLeft a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullLeft a:hover:before
{
    width: 100%;
}

/* Pull up and down  */
div.pullUpDown a:before, div.pullUpDown a:after
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUpDown a:before
{
    top: 0px;
}

div.pullUpDown a:after
{
    bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
    height: 100%;
}

/* Pull right and left  */
div.pullRightLeft a:before, div.pullRightLeft a:after
{
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRightLeft a:before
{
    left: 0px;
}

div.pullRightLeft a:after
{
    right: 0px;
}

div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after
{
    width: 100%;
}

/* Highlight text out  */
div.highlightTextOut a
{
    color: rgba(255, 255, 255, 0.3); 
}

div.highlightTextOut a:before, div.highlightTextIn a:before
{
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;
    padding: 10px;
    overflow: hidden;
    content: attr(alt);
    transition: all 0.3s;
    transform: scale(0.8);
    opacity: 0;
}

div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before
{
    transform: scale(1);
    opacity: 1;
}

/* Highlight text in  */
div.highlightTextIn a
{
    color: rgba(0, 0, 0, 0.4); 
}

div.highlightTextIn a:before
{
    transform: scale(1.2);
}

200

Navigation Animation

By: rald_dev

200

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

193

Animated Button

By: rald_dev

173

Unleash Your Creativity. Code, Test, & Share!

Subscribe Us

Popular Categories

Popular Css Element

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

By: pixeldev

By: rald_dev

By: pixeldev

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