The Power of Pure CSS - No JavaScript Needed

72

body{    
    perspective: 1000px;
}
div{
    height:600px;
    width:800px;
    position: absolute;
}
main{
    box-sizing:border-box;
    height:600x;
    width:800px;
    border:1px solid black;
    overflow: hidden;
    margin:auto;
    padding:0;
    background: #EEE;
}
.box{
    position:relative;
    transform-style: preserve-3d;
    margin:50px auto;
    line-height: 600px;
    text-align: center;
    font-size: 600px;
    animation: carousel 15s ease-in-out infinite;
}
.box:hover{
    animation-play-state: paused;
}

.front{
    background: #088;
}
.back{
    background: #0FF;
    transform: translateZ(-600px) rotateX(180deg) rotateZ(180deg);
}
.right{
    width:600px;
    background:#880;
    transform-origin: right;
    transform:translateX(200px) translateZ(-600px) rotateY(90deg) ;
}
.left{
    background: #FF0;
    transform-origin: left;
    width:600px;
    transform: translateZ(-600px) rotateY(-90deg);
}

.top{
    background: #808;
    transform-origin: top;
    transform: rotateX(90deg) translateY(-600px);
}

.bottom{
    background: #F0F;
    transform-origin: bottom;
    transform:rotateX(90deg) rotateY(180deg) rotateZ(180deg) translateY(600px);
}

@-webkit-keyframes carousel {
    0%, 100%{ 
        transform:none;
    }
/*    pic 1*/
    17%{
        -webkit-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -ms-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -o-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
    }
/*    pic 2*/
    33%{
        -webkit-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -ms-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -o-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        transform: rotateX(-90deg) translateZ(300px) translateY(300px);
    }
/*    pic 5*/
    50%{
        -webkit-transform: rotateY(180deg) translateZ(600px);
        -ms-transform: rotateY(180deg) translateZ(600px);
        -o-transform: rotateY(180deg) translateZ(600px);
        transform: rotateY(180deg) translateZ(600px);
    }
/*    pic 3*/
    67%{
        -webkit-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -ms-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -o-transform: rotateY(90deg) translateZ(300px) translateX(400px);
    transform: rotateY(90deg) translateZ(300px) translateX(400px);
    }
/*    pic 4*/
    84%{
        -webkit-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -ms-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -o-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        transform: rotateX(90deg) translateY(-300px) translateZ(300px);
    }
/*    pic 6*/
}
@-o-keyframes carousel {
    0%, 100%{ 
        transform:none;
    }
/*    pic 1*/
    17%{
        -webkit-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -ms-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -o-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
    }
/*    pic 2*/
    33%{
        -webkit-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -ms-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -o-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        transform: rotateX(-90deg) translateZ(300px) translateY(300px);
    }
/*    pic 5*/
    50%{
        -webkit-transform: rotateY(180deg) translateZ(600px);
        -ms-transform: rotateY(180deg) translateZ(600px);
        -o-transform: rotateY(180deg) translateZ(600px);
        transform: rotateY(180deg) translateZ(600px);
    }
/*    pic 3*/
    67%{
        -webkit-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -ms-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -o-transform: rotateY(90deg) translateZ(300px) translateX(400px);
    transform: rotateY(90deg) translateZ(300px) translateX(400px);
    }
/*    pic 4*/
    84%{
        -webkit-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -ms-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -o-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        transform: rotateX(90deg) translateY(-300px) translateZ(300px);
    }
/*    pic 6*/
}
@-moz-keyframes carousel {
    0%, 100%{ 
        transform:none;
    }
/*    pic 1*/
    17%{
        -webkit-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -ms-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -o-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
    }
/*    pic 2*/
    33%{
        -webkit-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -ms-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -o-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        transform: rotateX(-90deg) translateZ(300px) translateY(300px);
    }
/*    pic 5*/
    50%{
        -webkit-transform: rotateY(180deg) translateZ(600px);
        -ms-transform: rotateY(180deg) translateZ(600px);
        -o-transform: rotateY(180deg) translateZ(600px);
        transform: rotateY(180deg) translateZ(600px);
    }
/*    pic 3*/
    67%{
        -webkit-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -ms-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -o-transform: rotateY(90deg) translateZ(300px) translateX(400px);
    transform: rotateY(90deg) translateZ(300px) translateX(400px);
    }
/*    pic 4*/
    84%{
        -webkit-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -ms-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -o-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        transform: rotateX(90deg) translateY(-300px) translateZ(300px);
    }
/*    pic 6*/
}
@keyframes carousel {
    0%, 100%{ 
        transform:none;
    }
/*    pic 1*/
    17%{
        -webkit-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -ms-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        -o-transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
        transform: rotateY(-90deg) translateX(-400px) translateZ(300px);
    }
/*    pic 2*/
    33%{
        -webkit-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -ms-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        -o-transform: rotateX(-90deg) translateZ(300px) translateY(300px);
        transform: rotateX(-90deg) translateZ(300px) translateY(300px);
    }
/*    pic 5*/
    50%{
        -webkit-transform: rotateY(180deg) translateZ(600px);
        -ms-transform: rotateY(180deg) translateZ(600px);
        -o-transform: rotateY(180deg) translateZ(600px);
        transform: rotateY(180deg) translateZ(600px);
    }
/*    pic 3*/
    67%{
        -webkit-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -ms-transform: rotateY(90deg) translateZ(300px) translateX(400px);
        -o-transform: rotateY(90deg) translateZ(300px) translateX(400px);
    transform: rotateY(90deg) translateZ(300px) translateX(400px);
    }
/*    pic 4*/
    84%{
        -webkit-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -ms-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        -o-transform: rotateX(90deg) translateY(-300px) translateZ(300px);
        transform: rotateX(90deg) translateY(-300px) translateZ(300px);
    }
/*    pic 6*/
}

72

Pure CSS Carousel ( Cube )

By: pixeldev

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
/* adds animation for all transitions */ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
margin: 0; 
padding: 0; 
-webkit-text-size-adjust: none; 
}

/* Makes sure that everything is 100% height */

html,body { 
height: 100%; 
overflow: hidden; 
}

/* gets the actual input out of the way; 
we're going to style the label instead */

#drawer-toggle { 
position: absolute; 
opacity: 0; 
}

#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left: 0px; 
height:50px; 
width: 50px; 
display: block; 
position: fixed; 
 background: rgba(255,255,255,.0);
z-index: 1; 
}

/* adds our "hamburger" menu icon */

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
height: 2px; 
width: 24px; 
background: #8d8d8d; 
left: 13px; 
top: 18px; 
box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; 
}

header { 
width: 100%; 
position: fixed; 
left: 0px; 
background: #efefef; 
padding: 10px 10px 10px 50px; 
font-size: 30px; 
line-height: 30px; 
z-index: 0; 
}

/* drawer menu pane - note the 0px width */

#drawer { 
position: fixed; 
top: 0; 
left:-300px; 
height: 100%; 
width: 300px; 
background: #2f2f2f; 
overflow-x: hidden; 
overflow-y: scroll; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
}

/* actual page content pane */

#page-content { 
margin-left: 0px; 
margin-top: 50px; 
width: 100%; 
height: calc(100% - 50px); 
overflow-x:hidden; 
overflow-y:scroll; 
-webkit-overflow-scrolling: touch; 
padding: 20px; 
}

/* checked styles (menu open state) */

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 300px); 
background: rgba(255,255,255,.8); 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 300px; 
}

#drawer-toggle:checked ~ #drawer { 
left: 0px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}

/* Menu item styles */

#drawer ul { 
list-style-type:none; 
}

#drawer ul a { 
display:block; 
padding:10px; 
color:#c7c7c7; 
text-decoration:none; 
}

#drawer ul a:hover { 
color:white; 
}

/* Responsive MQ */

@media all and (max-width:350px) {

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: 50px; 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: calc(100% - 50px); 
}

#drawer-toggle:checked ~ #drawer { 
width: calc(100% - 50px); 
padding: 20px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: calc(100% - 50px); 
}

}

72

Responsive Pure CSS Menu Drawer

By: pixeldev

<title>Responsive Tables</title>

<section>
   <ol class="collection collection-container">
     
     <li class="item item-container">
       <div class="attribute"></div>
       <div class="attribute" data-name="#">#</div>
       
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">Part Number</div>
           <div class="attribute" data-name="Part Description">Part Description</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute">Vendor Number</div>
           <div class="attribute">Vendor Name</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute">Order Qty</div>
         <div class="attribute">Receive Qty</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute">Cost</div>
         <div class="attribute">Extended Cost</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute">Duty %</div>
         <div class="attribute">Duty</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute">Freight %</div>
         <div class="attribute">Freight</div>
       </div>
       <div class="attribute">UOM</div>
       <div class="attribute">Vendor Part Number</div>
     </li>
      
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">1</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10001</div>
           <div class="attribute" data-name="Part Description">Description of part</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">001</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">100001</div>
     </li>
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">2</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10002</div>
           <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
           </div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">002</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
     </li>
   </ol>
</section>

ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

.item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

/* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

.attribute::before {
        content: attr(data-name);
    }

/* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
    }

.attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

/* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 10em;
    }

.part-id {
        --column-width-min: 10em;
    }

.vendor-information {
        --column-width-min: 8em;
    }

.quantity {
        --column-width-min: 5em;
    }

.cost {
        --column-width-min: 5em;
    }

.duty {
        --column-width-min: 5em;
    }

.freight {
        --column-width-min: 5em;
    }

.collection {
        border-top: 1px solid gray;
    }

/* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

.item-container:hover {
        background-color: rgb(200, 227, 252);
    }

/* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

71

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

71

scroll down line animation

By: pixeldev

body {
  height: 100vh;
}

.cont {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
}

.dots {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  transform: translate(0px,0px);
}

.d1 {
  transform: rotate(0deg) translateX(80px);
  background: #ff7171;
  animation: orbit1 2.5s ease-in-out infinite alternate;
  z-index: 10;
}

.d2 {
  transform: rotate(-90deg) translateX(80px);
  background: #377b37;
  animation: orbit2 2.5s ease-in-out infinite alternate;
  z-index: 8;
}

.d3 {
  transform: rotate(180deg) translateX(80px);
  background: #afaf29;
  animation: orbit3 2.5s ease-in-out infinite alternate;
  z-index: 6;
}

.d4 {
  transform: rotate(90deg) translateX(80px);
  background: #7a5afb;
  animation: orbit4 2.5s ease-in-out infinite alternate;
  z-index: 4;
}

.d5 {
  transform: rotate(135deg) translateX(80px);
  background: #e62575;
  animation: orbit5 2.5s ease-in-out infinite alternate;
  z-index: 5;
}

.d6 {
  transform: rotate(225deg) translateX(80px);
  background: #967e77;
  animation: orbit6 2.5s ease-in-out infinite alternate;
  z-index: 7;
}

.d7 {
  transform: rotate(315deg) translateX(80px);
  background: #d432c7;
  animation: orbit7 2.5s ease-in-out infinite alternate;
  z-index: 9;
}

.d8 {
  transform: rotate(405deg) translateX(80px);
  background: #00bcd4;
  animation: orbit8 2.5s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(360deg) translateX(0px) scale(1.2,1.2);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(-90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(270deg) translateX(0px) scale(1.6,1.6);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(180deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(540deg) translateX(0px) scale(2,2);
  }
}

@keyframes orbit4 {
  0% {
    transform: rotate(90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(450deg) translateX(0px) scale(2.4,2.4);
  }
}

@keyframes orbit5 {
  0% {
    transform: rotate(135deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(495deg) translateX(0px) scale(2.2,2.2);
  }
}

@keyframes orbit6 {
  0% {
    transform: rotate(225deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(585deg) translateX(0px) scale(1.8,1.8);
  }
}

@keyframes orbit7 {
  0% {
    transform: rotate(315deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(675deg) translateX(0px) scale(1.4,1.4);
  }
}

@keyframes orbit8 {
  0% {
    transform: rotate(405deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(765deg) translateX(0px) scale(2.6,2.6);
  }
}

71

Circle(dots) css animation loader

By: pixeldev

html,
body {
  height: 100%;
  margin: 0px;
}

.slider-container {
  background: linear-gradient(
    149deg,
    rgb(247, 0, 255) 0%,
    rgb(255, 145, 0) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
}

.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  background: none;
  border: none;
}

a.slide__prev,
.slider::before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next,
.slider::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid black;
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
}

.slider__navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0 10px 0 10px;
}

.read-article{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: #000;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: arial;
  text-decoration: none;
  box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
    background: #d5d5d5;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
  display: none;
}

71

Pure CSS Slider – fullPage blog

By: pixeldev

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

body {
  background-color: #3A3033;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #70B7CC;
}

.container--c-0 {
  background: #3A3033;
}

.icon {
  position: relative;
  width: 240px;
  height: 240px;
  animation: delayIn 1s ease-in 1;
}

@media screen and (max-width: 400px) {
  .icon {
    width: 180px;
    height: 180px;
  }
}

.sun {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  animation: raySpin 20s linear infinite;
}

.sun::before {
  display: block;
  content: '';
  position: absolute;
  z-index: -200;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  transform: scale(0.9);
  animation: blastIn .35s ease-in-out 1;
  pointer-events: none;
}

.sun::after {
  display: block;
  content: '';
  position: absolute;
  z-index: -100;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  pointer-events: none;
}

.sun:hover::before {
  animation: blastOut .5s ease-in-out 1;
}

.sun:hover::after {
  animation: bounce .5s ease-in-out 1;
}

.sun__rays {
  position: absolute;
  z-index: -400;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  transform: scale(0.5);
  animation: raysIn .5s ease-in-out 1 forwards;
  pointer-events: none;
}

.sun:hover .sun__rays {
  animation: raysOut .5s ease-in-out 1 forwards;
}

.sun__ray {
  position: absolute;
  left: 50%;
  width: 2%;
  height: 100%;
  margin-left: -1%;
}

.sun__ray:nth-of-type(2) { transform: rotate(20deg); }
.sun__ray:nth-of-type(3) { transform: rotate(40deg); }
.sun__ray:nth-of-type(4) { transform: rotate(60deg); }
.sun__ray:nth-of-type(5) { transform: rotate(80deg); }
.sun__ray:nth-of-type(6) { transform: rotate(80deg); }
.sun__ray:nth-of-type(7) { transform: rotate(100deg); }
.sun__ray:nth-of-type(8) { transform: rotate(120deg); }
.sun__ray:nth-of-type(9) { transform: rotate(140deg); }
.sun__ray:nth-of-type(10) { transform: rotate(160deg); }

.sun__ray::before,
.sun__ray::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 10%;
  background: rgba(255, 255, 255, 0.4);
}

.sun__ray::before {
  top: 0;
}

.sun__ray::after {
  bottom: 0;
}

/* Animations */
@keyframes blastOut {
  0% { transform: scale(0.9); opacity: .6; }
  100% { transform: scale(10); opacity: 0; }
}

@keyframes blastIn {
  0% { transform: scale(10); opacity: 0; }
  30% { opacity: 0.1; }
  100% { transform: scale(0.9); opacity: 0; }
}

@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes raysOut {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@keyframes raysIn {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
}

@keyframes raySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359.999deg); }
}

@keyframes delayIn {
  0% { transform: scale(0); }
  50% { transform: scale(0); }
  100% { transform: scale(1); }
}

71

Pure CSS Animated Weather Icon Hover

By: pixeldev

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

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

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

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

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

70

3D Card Carousel Pure CSS

By: pixeldev

body { background: #222; }
.box {
  background-color: #61ab20;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 3px #000;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}
.box b {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3673cf;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}

All

Rainbow Box

By: pixeldev

Pure CSS Horizontal Accordion

By: pixeldev

Pure CSS Carousel ( Cube )

By: pixeldev

Responsive Pure CSS Menu Drawer

By: pixeldev

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

scroll down line animation

By: pixeldev

Circle(dots) css animation loader

By: pixeldev

Pure CSS Slider – fullPage blog

By: pixeldev

Pure CSS Animated Weather Icon Hover

By: pixeldev

3D Card Carousel Pure CSS

By: pixeldev

CSS Bouncing Ball

By: pixeldev

Simple gradient animation

By: pixeldev