The Power of Pure CSS - No JavaScript Needed

* {
    box-sizing: border-box;
}

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

68

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

By: pixeldev

68

Pure CSS table gadgets

By: pixeldev

*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

html{
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #59488b;
}
h1,h2{
    color: rgba(255,255,255,0.5);
    font-size: 40px;
    font-weight: 200;
    text-align: center;
    margin: 40px 0 0 0;
}
h2{
    font-size: 18px;
    margin: 0;
    padding: 0;
    margin: 10px 0;
}
h1 span{
    font-size: 30px;
}

a{
    text-decoration: none;
}
a:hover{
    transition: all linear 0.2s;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.wrapper{
    width: 700px;
    margin: 0 auto;
}
.row{
    text-align: center;
    padding: 50px 0;
}
.span, .span_large{
    float: left;
    width: 100px;
    background-color: rgba(0,0,0, 0.02);
    height: 100px;
    vertical-align: middle;
    border-radius: 1px;
    margin-right: 100px;
}
.span:last-child{
    margin-right: 0px;
}

/* Timer*/
.timer{
    width: 24px;
    height: 24px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 50%;
    position: relative;
    margin: 38px auto;/* Not necessary- its only for layouting*/    
 }
.timer:after, .timer:before{
    position: absolute;
    content:"";
    background-color: #fff;
}
.timer:after{
    width: 10px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
       -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
}

.timer:before{
    width: 8px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
       -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/*Typing Loader*/
.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 46px auto; /* Not necessary- its only for layouting*/  
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

/*Location indicator */
.location_indicator{
    margin: 30px auto;
    position: relative;
    left: -9px;
}

.location_indicator:before, .location_indicator:after{
    position: absolute;
    content: "";
}

.location_indicator:before{
    width: 20px;
    height: 20px;
    border-radius: 100% 100% 100% 0;
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
    -webkit-animation: mapping 1s linear infinite;
       -moz-animation: mapping 1s linear infinite;
            animation: mapping 1s linear infinite;
    -webkit-transform: rotate(-46deg);
       -moz-transform: rotate(-46deg);
            transform: rotate(-46deg);

}

.location_indicator:after{
    width: 30px;
    height: 10px;
    border-radius: 100%;
    left: 44px;
    background-color: rgba(255, 255, 255, 0.2);
    top: 24px;
    z-index: -1;
}

@-webkit-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}
@-moz-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}
@-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}

/* go in*/
.dashboard{
    width: 32px;
    height: 32px;
    margin: 30px auto;
    border: 2px rgba(255,255,255,1) solid;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.dashboard:after, .dashboard:before{
    position: absolute;
    content: "";
}
.dashboard:after{
    width:14px;
    height: 2px;
    top: 20px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    background-color: rgba(255,255,255,1);
    -webkit-animation: dashboard_hand 2s linear infinite alternate;
       -moz-animation: dashboard_hand 2s linear infinite alternate;
            animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before{
    width: 32px;
    height: 10px;
    background-color: rgba(255,255,255,1);
    top:20px;
    left: -2px;
}
@-webkit-keyframes dashboard_hand{
    0%{ -webkit-transform: rotate(-160deg);}
    100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
    0%{ -moz-transform: rotate(-160deg);}
    100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
    0%{ transform: rotate(-160deg);}
    100%{ transform: rotate(-20deg);}
}

/*Battery*/
.battery{
    width: 28px;
    height: 14px;
    border: 1px #fff solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery:after{
    width: 2px;
    height: 7px;
    background-color: #fff;
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}

.magnifier{
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 0px 1px #fff;
    border-radius: 50%;
    position: relative;
    margin: 34px auto;
    -webkit-animation: magnify 1s linear infinite alternate;
       -moz-animation: magnify 1s linear infinite alternate;
            animation: magnify 1s linear infinite alternate;
}
.magnifier:after, .magnifier:before{
    position: absolute;
    content: "";
}
.magnifier:before{
    content: "me";
    font-size: 12px;
    left: 2px;
    text-align: center;
    top: 2px;
}
.magnifier:after{
    width: 2px;
    height: 8px;
    background-color: #fff;
    bottom: -6px;
    left: 20px;
    border-radius: 2px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

@-webkit-keyframes magnify{
    0%{-webkit-transform: scale(1); }
    100%{-webkit-transform: scale(1.5);}
}
@-moz-keyframes magnify{
    0%{-moz-transform: scale(1); }
    100%{-moz-transform: scale(1.5);}
}
@keyframes magnify{
    0%{transform: scale(1); }
    100%{transform: scale(1.5);}
}

/*help*/
.help{
    width: 30px;
    height: 30px;
    border: 1px #fff solid;
    border-radius: 50%;
    -webkit-animation: rotation 1s ease-in-out infinite;
       -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
    margin: 30px auto;
}
.help:after{
    width: 5px;
    height: 5px;
    background-color: rgba(255,255,255,1);
    border-radius: 100%;
    position: absolute;
    content: "";
}
@-webkit-keyframes rotation{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
    0%{-moz-transform: rotate(0deg);}
    100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*eye ball*/
.eye{
    width: 20px;
    height: 20px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 30px 0px 0px 0px rgba(255,255,255,0.8);
    position: relative;
    margin: 36px 26px;
}

.eye:after{
    background-color: #59488b;
    width: 10px;
    height: 10px;
    box-shadow: 30px 0px 0px 0px #59488b;
    border-radius: 50%;
    left: 9px;
    top: 8px;
    position: absolute;
    content: "";
    -webkit-animation: eyeball 2s linear infinite alternate;
       -moz-animation: eyeball 2s linear infinite alternate;
            animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@-moz-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}

/*coffee cup*/
.coffee_cup{
    width: 20px;
    height: 24px;
    border: 1px rgba(255,255,255,1) solid;
    border-radius: 0px 0px 5px 5px;
    position: relative;
    margin: 36px auto;
}
.coffee_cup:after, .coffee_cup:before{
    position: absolute;
    content: "";
}
.coffee_cup:after{
    width: 5px;
    height: 12px;
    border: 1px #fff solid;
    border-left: none;
    border-radius: 0px 20px 20px 0px;
    left: 20px;
}
.coffee_cup:before{
    width: 1px;
    height: 6px;
    background-color: rgba(255,255,255,1);
    top: -10px;
    left: 4px;
    box-shadow: 5px 0px 0px 0px rgba(255,255,255,1),
                5px -5px 0px 0px rgba(255,255,255,1),
                10px 0px 0px 0px rgba(255,255,255,1);
    -webkit-animation: steam 1s linear infinite alternate;
       -moz-animation: steam 1s linear infinite alternate;
            animation: steam 1s linear infinite alternate;
}

@-webkit-keyframes steam{
    0%{height: 0px;}
    100%{height: 6px;}            
}
@-moz-keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}
@keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}

/*square*/
.square{
    width: 20px;
    height: 20px;
    border:1px  rgba(255,255,255,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
       -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.square:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(255,255,255,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
       -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@-webkit-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@-moz-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
/*circle classick*/
.circle{
    margin: 40px auto;
    position: relative;
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,.5);;
    box-shadow: -14px 0px 0px rgba(255,255,255,1);
    border-radius: 50%;
    -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
       -moz-animation: circle_classic 1s ease-in-out infinite alternate;
            animation: circle_classic 1s ease-in-out infinite alternate;
}

@-webkit-keyframes circle_classic{
    0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);}   
}
@-moz-keyframes circle_classic{
    0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);}   
}
@keyframes circle_classic{
    0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; transform: rotate(360deg) scale(1.2);}   
}

/*cloud*/

.cloud{
    margin: 42px 30px;
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: relative;
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,1),
                18px 0px 0px 0px rgba(255,255,255,1),
                24px 0px 0px 0px rgba(255,255,255,1),
                30px 0px 0px 0px rgba(255,255,255,1),
                36px 0px 0px 0px rgba(255,255,255,1);
    
    -webkit-animation: rain 1s linear infinite alternate;
       -moz-animation: rain 1s linear infinite alternate;
            animation: rain 1s linear infinite alternate;
}
.cloud:after{
    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: rgba(255,255,255,1);
    top: 0px;
    opacity: 1;
    -webkit-animation: line_flow 2s linear infinite reverse;
       -moz-animation: line_flow 2s linear infinite reverse;
            animation: line_flow 2s linear infinite reverse;
}

@-webkit-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}
@-moz-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}
@keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}

@-webkit-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@-moz-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}

/* Me */

.aboutme{
    width: 700px;
    padding: 50px 0;
    border-top: 2px rgba(255,255,255,0.03) solid;
}

.viduthalai{
    background: url(../img/viduthalai.png) no-repeat;
    width: 100px;
    height: 100px;
    border-radius: 0 2px 2px 0;
    float: left;
    opacity: 0.5;
}
.viduthalai:hover{
    opacity: 1;
}
.intro{
    float: left;
    width: 400px;
    padding-left: 20px;
    color: rgba(255,255,255,0.5);
}
.intro a{
    color: rgba(255,255,255,0.5);
}
.intro a:hover{
    color: rgba(255,255,255,1);
}

.intro span, p{
    font-size: 15px;
    font-weight: 200;
}
.intro h3{
    font-size: 20px;
    font-weight: 200;
    margin: 0px;
}
.git{
    color: rgba(255,255,255,0.5);
    float: right;
    text-align: right;
    padding: 10px 20px;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.3);
    font-weight: 200;
}
.git:hover{
     background-color: rgba(0,0,0,0.2);
}

68

Loaders kit

By: pixeldev

<main>
  <h1>CSS only accordion, nearly accessible</h1>
    
  <label for="tota11y-open-close">Expand all sections?</label>
    
  <ul class="tota11y-accordion" aria-label="FAQs accordion">
      <li>
         <a href="#acc1" id="#accLink1">Short Item, No Scroll</a>
         <section class="content" id="acc1" aria-labelledby="accLink1">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc2" id="#accLink2">Long Item, Has Scroll, No Focusable Content</a>
          <section class="content" id="acc2" aria-labelledby="accLink2">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc3" id="#accLink3">Long Item, Has Scroll, Focusable Content</a>
          <section class="content" id="acc3" aria-labelledby="accLink3">
              <ul>
                  <li>Item <a href="#">Focusable link</a></li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
  </ul>
</main>

:root {
    --ta11y-open-duration: 0.5s;
}

body {
    font-size: 18px;
    background: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    color: white;
    padding: 30px;
}

a {
    color: white;
}

.tota11y-accordion > li > a {
    padding: 2rem 1.5rem;
    display: block;
    color: white;
    position: relative;
    cursor: pointer;
    outline: transparent;
    text-decoration: none;
}

.tota11y-accordion > li {
    max-width: 800px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 1rem;
    background: #151618;
    box-shadow: 0px 0px 0px 0px #333;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: box-shadow 0.3s 0s ease,
        grid-template-rows var(--ta11y-open-duration);
}
.tota11y-accordion > li:focus-within {
    box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
}
.tota11y-accordion > li:has(.content:target) > a:before,
.tota11y-accordion > li:has(.content:focus-within) > a:before {
    transform: rotate(180deg);
}

.tota11y-accordion > li > a:before {
    content: "";
    opacity: 0.6;
    background-image: url("https://assets.codepen.io/7212043/rounded-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1.8rem;
    right: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 1rem 50%;
    transition: 0.25s transform ease;
}

.tota11y-accordion > li .content {
    border-top: none;
    margin: 0 1rem;
    padding: 0 0.5rem;
    border-top: none;
    color: #a9abb3;
    visibility: hidden;
    display: grid;
    overflow: hidden;
    transition: margin var(--ta11y-open-duration) linear,
        padding var(--ta11y-open-duration) linear;
    max-height: 200px;
}
.tota11y-accordion > li .content::-webkit-scrollbar {
    width: 14px;
}
.tota11y-accordion > li .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.tota11y-accordion > li .content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
}
@keyframes show-scroll {
    0% {
        overflow-y: hidden;
    }
    0.2% {
        overflow-y: auto;
    }
    to {
        overflow-y: auto;
    }
}
.tota11y-accordion > li .content:focus {
    outline: none;
}
.tota11y-accordion > li:has(.content:target),
.tota11y-accordion > li:has(.content:focus-within) {
    grid-template-rows: min-content 1fr;
}
.tota11y-accordion > li:has(.content:target) .content,
.tota11y-accordion > li:has(.content:focus-within) .content {
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll; 
    overflow-y: auto;
    
}

@media (prefers-reduced-motion) {
    :root {
        --ta11y-open-duration: 0s;
    }
    .tota11y-accordion > li:has(.content:target) .content,
    .tota11y-accordion > li:has(.content:focus-within) .content {
        overflow-y: auto;
    }
    .tota11y-accordion > li > a:before {
        transition: none;   
    }
}

label{
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

#tota11y-open-close{
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    accent-color: #555;
}

#tota11y-open-close:checked ~ ul>li{
    grid-template-rows: min-content 1fr;
}

#tota11y-open-close:checked ~ ul>li>.content{
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll;
}

/* we can open all of the accordion items easily with the @media print media query if we wish */
@media print {
    .tota11y-accordion > li {
        grid-template-rows: min-content 1fr;
    }
    .tota11y-accordion > li .content {
        visibility: visible;
        margin: 0.5rem 1rem 2rem 1rem;
        padding: 0.5rem;
        max-height: none;
    }
    /* ideally we would also remove all of the bg-color etc. to save ink, but that is specific to this colour scheme and so not relevant in the demo */
}

68

Animated Pure CSS accordion

By: pixeldev

body{
	margin: 0;
	padding: 0;
	font-family: 'Abril Fatface', serif;
}

.slider{
	height: 600px;
	background-color: #293132;
	text-align: center;
	position: relative;
	animation: slideColor 10s forwards infinite;
}

.caption{
	line-height: 100px;
	font-size: 60px;
	color: #fff;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	margin-left: -300px;
}

.text-box{
	display: inline-block;
	position: relative;
}

.text-box div{
	display: inline-block;
	position: absolute;
	top: -200px;
	transform: rotateX(-90deg);
	opacity: 0;
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	animation-timing-function: ease;
}

.text-box div:nth-child(1){
	animation: rollDown 10s forwards infinite;
}

.text-box div:nth-child(2){
	animation: rollDown2 10s forwards infinite;
}

.text-box div:nth-child(3){
	animation: rollDown3 10s forwards infinite;
}

@keyframes rollDown {
	0%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	11%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	22%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	33%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown2 {
	33%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	44%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	55%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	66%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown3 {
	66%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	77%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	88%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	99%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes slideColor{
	0%{
		background-color: #387780;
	}
	33%{
		background-color: #3f88c5;
	}
	66%{
		background-color: #588b8b;
	}
	100%{
		background-color: #387780;
	}
}

68

Rolling text animation

By: pixeldev

<div class="content">
  <div class="is-not-supported" role="alert">
    <p>Scroll-snap is not supported in your current browser. Supported browsers include Firefox version 39.</p>
  </div>
  <h1>Pure CSS Slider</h1>
  <p>This slider uses the css <code>scroll-snap</code> property as well as css styling for the scrollbar. Unfortunately, these two features have opposite browser support, so you will not see all the aspects of this pen in a single browser. You can learn more about the <code>scroll-snap</code>
  <div class="slider">
    <div class="slider-buttons">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
    </div>
    <div class="slides">
      <div class="slide" id="slide-1">
        <p>This is the first slide. Scroll to the right to go to the next slide.</p>
      </div>
      <div class="slide" id="slide-2">
        <p>This is the second slide. Alternatively, change slides using the buttons at the top.</p>
      </div>
      <div class="slide" id="slide-3">
        <p>This is the third slide. You're getting the hang of it.</p>
      </div>
      <div class="slide" id="slide-4">
        <p>This is the last slide. Scroll back to the left if you're into that stuff.</p>
      </div>
    </div>
  </div>
</div>

/** Displays Warning if required property is not supported. **/
@supports (scroll-snap-type: mandatory) or (-webkit-scroll-snap-type: mandatory) {
  .is-not-supported {display: none;}
}

/** Generic Styling & Formatting **/
body * {box-sizing: border-box;}
body {
  margin: 0;
  font-family: helvetica, arial, sans-serif;
}
.content {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

/** Pure CSS Slider **/
.slider {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 2rem auto;
  background: #ddd;
}
.slider .slides {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /** Thank you Sergey! http://blog.gospodarets.com/css-scroll-snap/ **/
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    font-size: 0;
  /** **/
}
.slider .slide {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slider .slide p {
  position: absolute;
  display: block;
  bottom: 0; left: 0;
  width: 100%;
  font-size: 1rem;
  color: #000;
  background: rgba(0,0,0,0.15);
  padding: 1em;
  margin: 0;
  white-space: normal;
}
.slider #slide-1 {background: #afa;}
.slider #slide-2 {background: #ffa;}
.slider #slide-3 {background: #faa;}
.slider #slide-4 {background: #aff;}

.slider-buttons {
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: auto;
  padding: 0.5rem;
  font-size: 1rem;
  text-align: right;
  z-index: 2;
}
.slider-buttons a {
  width: 2em;
  display: inline-block;
  background: rgba(0,0,0,0.15);
  text-align: center;
  padding: 0.5em 0;
  text-decoration: none;
  color: #000;
}

/** Chrome Scroll Wheel **/

::-webkit-scrollbar {
  height: 34px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: #ddd url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/grab.png) center no-repeat;
  background-size: 24px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  position: absolute;
  top: 0;
  display: block;
  height: 34px;
  width: 34px;
  background: #ccc;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow2.png);
  background-size: 100%;
}
::-webkit-scrollbar-button:end:increment {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow.png);
}

/** Alert Box **/
.is-not-supported {
  width: 100%;
  margin: 2rem auto;
  background: #fda;
  padding: 1em;
}
.is-not-supported p {margin: 0;}

@media (max-width: 600px) {
  .content {width: 95%;}
}

68

Pure CSS Slider using Scroll-Snap

By: pixeldev

.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}

.accordion ul li:nth-child(1) { background-image: url("https://unsplash.it/650/250?image=680"); }

.accordion ul li:nth-child(2) { background-image: url("https://unsplash.it/650/250?image=668"); }

.accordion ul li:nth-child(3) { background-image: url("https://unsplash.it/650/250?image=659"); }

.accordion ul li:nth-child(4) { background-image: url("https://unsplash.it/650/250?image=655"); }

.accordion ul li:nth-child(5) { background-image: url("https://unsplash.it/650/250?image=657"); }

.accordion ul li:nth-child(6) { background-image: url("https://unsplash.it/650/250?image=661"); }

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 600px) {

body { margin: 0; }

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
}

.about {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #666;
}

.about a {
  color: blue;
  text-decoration: none;
}

.about a:hover { text-decoration: underline; }

67

Pure CSS Horizontal Responsive Image Accordion Slider

By: pixeldev

67

Table fixed first column, pure css

By: pixeldev

67

Heart animation

By: pixeldev

.wheel{
	border: 2px solid black;
	border-radius: 50%;
	margin-left: 50px;
	position: absolute;
	width: 55vw;
	height: 55vw;
	max-height: 500px;
	max-width: 500px;
	animation-name: wheel;
	animation-duration: 10s;/*Time of the animation*/
	animation-iteration-count: infinite;/*How many times the animation repeats*/
	animation-timing-function: linear;/*How the animation should progress over time*/
}

/********LINES********/

.line{
	
	background-color: black;
	width: 50%;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0% 0%;
}

/******Line types*********/

.line:nth-of-type(2){
	transform: rotate(60deg);
}

.line:nth-of-type(3){
	transform: rotate(120deg);
}

.line:nth-of-type(4){
	transform: rotate(180deg);
}

.line:nth-of-type(5){
	transform: rotate(240deg);
}

.line:nth-of-type(6){
	transform: rotate(300deg);
}

/********CABINS**********/

.cabin{
	background-color: red;
	width: 20%;
	height: 20%;
	position: absolute;
	border: 2px solid;
	transform-origin: 50% 0%;
	animation: cabins 10s ease-in-out infinite;/*animation-name, animation-duration, animation-timing-function, animation-iteration-count*/
}

/*******Cabin types*********/

.cabin:nth-of-type(1){
	right: -8.5%;
	top: 50%;
}

.cabin:nth-of-type(2){
	right: 17%;
	top: 93.5%;
}

.cabin:nth-of-type(3){
	right: 67%;
	top: 93.5%;
}

.cabin:nth-of-type(4){
	left: -8.5%;
	top: 50%;
}

.cabin:nth-of-type(5){
	left: 17%;
	top: 7%;
}

.cabin:nth-of-type(6){
	right: 17%;
	top: 7%;
}

/**********K E Y F R A M E S*************/

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

@keyframes cabins{
	0%{
		transform: rotate(0deg);		
	}
	
	25%{
		background-color: yellow;
	}
	
	50%{
		background-color: purple;
	}
	
	75%{
		background-color: yellow;
	}
	
	100%{
		transform: rotate(-360deg);
	}	
}

67

Ferris Wheel Animation

By: pixeldev

<header id="head">
	<div class="container">
    	<nav id="menu">
    		
    		<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
    		
    		<div class="box">
	    		<ul>
	    			<li><a href="#"><i class="icon-home"></i> home</a></li>
	    			<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
	    			<li><a href="#"><i class="icon-copy"></i> works</a></li>
	    			<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
	    		</ul>
    		</div>
    		
    	</nav>
	</div>
</header>

<section id="content">
	<div class="container">
		<h1>Pure CSS Navigation Overlay</h1>
		<p>Nisi pellentesque placerat penatibus montes ridiculus ridiculus! Penatibus porttitor, augue? Odio sed, elementum, in nisi ultricies enim? Risus scelerisque placerat et elementum odio dictumst. Scelerisque phasellus, sit in diam odio lectus porta, vel duis pid nisi! Eu eros! Sit non aenean enim hac egestas ultrices, et pulvinar sed, arcu et, arcu vel tortor turpis, phasellus lundium turpis turpis hac eros, auctor dignissim ut facilisis, est? Duis odio magnis? Aenean ultrices, mattis placerat adipiscing cum adipiscing ut, scelerisque augue in massa, pulvinar augue! Amet rhoncus arcu phasellus integer adipiscing tristique facilisis! Adipiscing sed ac turpis scelerisque nunc sit tempor turpis ultricies egestas adipiscing magnis sit augue et pulvinar sociis, urna in, aliquam sagittis dictumst</p>
		<p>Aliquam cum, auctor habitasse, elementum tempor et sit, urna integer. Dictumst, turpis penatibus magnis integer placerat adipiscing aliquam, sit rhoncus ut et, integer elementum tempor nisi nec facilisis, nec phasellus. Nisi odio lundium, eu rhoncus massa vut lacus magna mauris magnis! Eu tempor hac ac turpis eros tristique est pellentesque ac nascetur nascetur urna, placerat vel eu vel, dictumst amet. Pulvinar arcu odio, cursus, ridiculus nisi tempor sagittis amet platea? Vel mus quis nunc sed quis! Sagittis habitasse elementum ac rhoncus rhoncus amet nunc et? Phasellus! Phasellus urna, et aliquet diam sociis egestas duis? Porta lundium velit nisi nec, massa porta dolor nunc, mid lorem sit magnis montes. Vel nisi, elementum vut! Nisi nisi habitasse integer! Dolor sed.</p>
	</div>
</section>

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

* { padding: 0px; margin: 0px; border: 0px; outline: 0px; }		/* fast reset */

body { 
	font-family: 'Merriweather Sans', Arial, sans-serif;
	font-size: 12px; 
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
	position: fixed;
	text-align: center;
	overflow: hidden;
	z-index: -1;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu ul {
	position: relative;
	top: 20%;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu li { 
	display: inline-block; 
	margin: 20px;
}

#menu li a {
	border-radius: 3px;
	padding: 15px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i { 
	margin-right: 5px; 
	font-size: 24px;
}

#toggle-nav-label {
	color: rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.2);
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	display: block;
	cursor: pointer;
	position: relative;
	z-index: 500;
	width: 30px;
	height: 30px;
	border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box { 
	opacity: 1;
	z-index: 400;
}

#toggle-nav:checked ~ .box ul {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label { 
	background: #fff; 
	color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
	margin-bottom: 20px;
	font-size: 30px;
}

#content p {
	font-size: 14px;
	line-height: 150%;
	margin-bottom: 20px;
}

67

Pure CSS Navigation Overlay

By: pixeldev

.ms-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Fixed typo: 'jsutify-content' */
  font-family: sans-serif;

width: 100vw;
  height: 100vh;

background: linear-gradient(
    to right bottom,
    rgb(157, 215, 213),
    rgb(255, 135, 120) /* approximation of lighten(rgb(253, 115, 100), 10%) */
  );
}

.ms-header__title {
  flex: 1 1 100%;
  width: 100%;

text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;

/* CSS3 does not support `mask-mode` and `mask-type` in most browsers */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
  mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
}

.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;

animation-name: wordSlider;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: 7s;
}

.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}

@keyframes wordSlider {
  0%, 19% {
    transform: translateY(0%);
  }

25%, 44% {
    transform: translateY(-25%);
  }

50%, 69% {
    transform: translateY(-50%);
  }

75%, 94% {
    transform: translateY(-75%);
  }

100% {
    transform: translateY(-75%);
  }
}

67

All

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

By: pixeldev

Pure CSS table gadgets

By: pixeldev

Loaders kit

By: pixeldev

Animated Pure CSS accordion

By: pixeldev

Rolling text animation

By: pixeldev

Pure CSS Slider using Scroll-Snap

By: pixeldev

Pure CSS Horizontal Responsive Image Accordion Slider

By: pixeldev

Table fixed first column, pure css

By: pixeldev

Heart animation

By: pixeldev

Ferris Wheel Animation

By: pixeldev

Pure CSS Navigation Overlay

By: pixeldev

CSS-only word slider

By: pixeldev