Working Fan using HTML, CSS, and Javascript. Good looking example of Fan

Working Fan using HTML, CSS, and Javascript. Good looking example of Fan

Avatar

 BY TEJAS




This type of working "Fan" Example you don't see before it. This example is little bit advance-level Example but don't worry about it.
You have to just copy and paste the codes and you ready to do the Rock.

What makes this example different from another examples?
In this Example we see fully stylised fan and fully working fan with buttons.



There are three buttons which are used to operate the fans.
for on/off the fan, change the area of fan, change the speed of fan.

In this example CSS displays main role hence CSS code is very lenthy.

In this example does not cantain any javascript code just one alert() is used for showing the alert "Use buttons to control the fan".


In below video shows working of Fan


below here is a HTML, CSS, and Javascript codes.



fan.html :-
    
        <div class="windows">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
        </div>
        <div class="fan">
            <div class="fan__root"> <span class="top"> <label class="red" for="engine"></label> <label class="green"
                        for="engine2"></label> <label class="blue" for="jack"></label> </span> <span class="bottom"></span>
            </div>
            <div class="fan__staddle"></div> <input type="checkbox" id="jack" hidden />
            <div class="head">
                <div class="fan__engine"> <span class="center"></span> </div> <input type="checkbox" id="engine" hidden
                    checked />
                <div> <span class="fly"></span> <span class="fly"></span> <span class="fly"></span>
                    <div class="fan__blades"> <input type="checkbox" id="engine2" hidden checked />
                        <div class="fan__blades">
                            <div class="center"></div>
                            <div class="blade"><span></span></div>
                            <div class="blade"><span></span></div>
                            <div class="blade"><span></span></div>
                            <div class="blade"><span></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    


fan-style.css :-
    
     
        html {
            overflow: hidden;
        }

        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: linear-gradient(90deg, #addfff, #fff9e8);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        body::after {
            position: absolute;
            width: 100%;
            content: "";
            height: calc(100% - 600px);
            z-index: 0;
            background: #efefef;
            bottom: 0;
        }

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

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes off {
            to {
                transform: rotate(380deg);
            }
        }

        @keyframes off2 {
            to {
                transform: rotate(880deg);
            }
        }

        @keyframes fly {
            to {
                margin-top: 50px;
            }
        }

        span {
            display: block;
        }

        .windows {
            width: 100vw;
            height: 100vh;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .window {
            flex: 1 20%;
            box-sizing: border-box;
            height: 300px;
            position: relative;
            border: 10px inset rgba(51, 51, 51, 0.2);
        }

        .window::after {
            position: absolute;
            height: 60%;
            width: 1px;
            border-radius: 10px;
            background: linear-gradient(to top, #0f80c7 20%, transparent 30%, transparent 50%, #3f7ba0 100%);
            opacity: 1;
            z-index: 5;
            top: 30px;
            left: 50%;
            transform: rotate(45deg);
            display: block;
            content: "";
        }

        .window::before {
            position: absolute;
            height: 40%;
            width: 1px;
            border-radius: 10px;
            background: linear-gradient(to top, #0f80c7 20%, transparent 10%, transparent 50%, #addfff 100%);
            opacity: 1;
            z-index: 5;
            top: 100px;
            left: 60%;
            transform: rotate(45deg);
            display: block;
            content: "";
        }

        .window:nth-child(5n - 3)::after,
        .window:nth-child(5n - 3)::before {
            opacity: 0.8 !important;
        }

        .window:nth-child(5n - 2)::after,
        .window:nth-child(5n - 2)::before {
            opacity: 0.4 !important;
        }

        .window:nth-child(5n - 1)::after,
        .window:nth-child(5n -1)::before {
            opacity: 0.3 !important;
        }

        .window:nth-child(5n)::after,
        .window:nth-child(5n)::before {
            opacity: 0.2 !important;
        }

        .fly {
            transition: 0.5s all cubic-bezier(0.04, 0.06, 0, 1.18), 1s transform;
            width: 10px;
            height: 6px;
            background: green;
            border-radius: 50%;
            position: absolute;
            animation: fly 5s alternate infinite ease-in-out;
        }

        .fly:nth-of-type(1) {
            top: -78px;
            left: -200px;
        }

        .fly:nth-of-type(2) {
            transform: translateY(-10px);
            animation-delay: 4s;
            top: 5px;
            right: -250px;
        }

        .fly:nth-of-type(3) {
            transform: translateY(0px);
            top: 400px;
            animation-delay: 2s;
            right: -400px;
        }

        .fly::after,
        .fly::before {
            content: "";
            position: absolute;
            width: 7px;
            height: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            display: block;
            border-radius: 50%;
        }

        .fly::before {
            bottom: 4px;
            transform: rotate(325deg);
            left: 3px;
        }

        .fly::after {
            transform: rotate(45deg);
            bottom: 6px;
        }

        .fan {
            width: 500px;
            height: 500px;
            position: relative;
            z-index: 1;
            margin-top: 75px;
            perspective: 500px;
        }

        .fan::after {
            content: "";
            display: block;
            position: absolute;
            height: 364px;
            width: 200px;
            background: rgba(0, 0, 0, 0.08);
            top: calc(100% - 24px);
            left: calc(50% - 100px);
            z-index: -1;
            transform: rotateX(104deg) rotateY(-1deg) rotate(25deg);
            transform-origin: top;
        }

        .fan__root {
            width: 200px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__root .top {
            overflow: hidden;
            width: 200px;
            height: 25px;
            position: relative;
        }

        .fan__root .top::after {
            content: "";
            display: block;
            width: 200px;
            height: 50px;
            background: #2f423f;
            border-radius: 50%;
        }

        .fan__root .top .red {
            position: absolute;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            right: 30px;
            background: #f15249;
            cursor: pointer;
            overflow: hidden;
        }

        .fan__root .top .green {
            position: absolute;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            right: 85px;
            background: #32ba7c;
            cursor: pointer;
            overflow: hidden;
        }

        .fan__root .top .green::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #0aa06e;
        }

        .fan__root .top .red::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #a00000;
        }

        .fan__root .top .blue {
            position: absolute;
            cursor: pointer;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            left: 30px;
            background: #3ac2f2;
            overflow: hidden;
        }

        .fan__root .top .blue::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #009cc6;
        }

        .fan__root .bottom {
            overflow: hidden;
            width: 200px;
            height: 20px;
        }

        .fan__root .bottom::after {
            content: "";
            display: block;
            width: 200px;
            height: 40px;
            background: #2f423f;
            border-radius: 18%;
            transform: translateY(-30px);
        }

        .fan__staddle {
            position: absolute;
            bottom: 45px;
            background: #2f423f;
            height: 270px;
            width: 13px;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__engine {
            position: absolute;
            bottom: 0px;
            width: 130px;
            height: 130px;
            background: #2f423f;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__engine::after {
            content: "";
            background: #2f423f;
            display: block;
            width: 25px;
            height: 50px;
            position: absolute;
            top: 105px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 5px 5px;
        }

        .fan__blades {
            width: 230px;
            height: 230px;
            position: absolute;
            bottom: -50px;
            transition: 2s;
            transform-origin: center center;
            left: calc(50% - 115px);
            z-index: 1;
            animation: spin infinite 0.38s linear forwards;
        }

        .fan__blades .fan__blades {
            bottom: 0;
            animation: spin infinite 0.5s linear forwards;
        }

        .fan__blades .blade {
            position: absolute;
            width: 50px;
            height: 100%;
            left: 50%;
            transform: translateX(-50%) skewY(25deg);
            perspective: 500px;
            transform-style: preserve-3d;
        }

        .fan__blades .blade:nth-child(2) {
            transform: translateX(-50%) rotate(90deg) skewY(25deg);
        }

        .fan__blades .blade:nth-child(3) {
            transform: translateX(-50%) rotate(180deg) skewY(25deg);
        }

        .fan__blades .blade:nth-child(4) {
            transform: translateX(-50%) rotate(270deg) skewY(25deg);
        }

        .fan__blades .blade span {
            width: 100%;
            height: 200%;
            border-radius: 44px;
            background: #ffc114;
            position: absolute;
            top: -66px;
            display: block;
            transform-style: preserve-3d;
            transform: rotateX(81deg);
            overflow: hidden;
        }

        .fan__blades .blade span::after {
            width: 50%;
            height: 100%;
            content: "";
            display: block;
            background: #fca12a;
            transform: rotate(0deg);
        }

        .fan__blades .center {
            position: absolute;
            overflow: hidden;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            background: #32ba7c;
            z-index: 2;
        }

        .fan__blades .center::after {
            display: block;
            content: "";
            width: 40px;
            height: 20px;
            background: #0aa06e;
        }

        .head {
            transition: 1s transform;
            height: auto;
            width: auto;
            position: absolute;
            width: 300px;
            height: 300px;
            bottom: 195px;
            left: calc(50% - 150px);
            /* transform: translateX(-50%); */
        }

        #engine:checked+div>div {
            animation: off2 1s ease-out forwards;
        }

        #engine:checked+div>span:nth-child(1) {
            transition: 5s all ease-in-out, 1s transform;
            left: 0px;
            top: 0px;
        }

        #engine:checked+div>span:nth-child(2) {
            transition: 5s all ease-in-out, 1s transform;
            right: 0px;
            top: 0px;
        }

        #engine:checked+div>span:nth-child(3) {
            transition: 7s all ease-in-out, 1s transform;
            right: -50px;
            top: 200px;
        }

        #engine2:checked+div {
            animation: off 1s ease-out forwards;
        }

        #jack:checked+div {
            transform: translateY(-115px);
        }

        #jack:checked+div>div:nth-child(3)>span {
            transform: translateY(115px);
        }

        @media screen and (max-width: 900px) {
            .window {
                flex: 1 25% !important;
            }
        }

        @media screen and (max-width: 800px) {
            .window {
                flex: 1 33.3333333% !important;
            }
        }

        @media screen and (max-width: 700px) {
            .window {
                flex: 1 50% !important;
            }
        }
    
  
fan.js :-
    
        alert("Use FAN'S Buttons to Operating Fan");
        
    
    
        <div class="windows">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
    </div>
    <div class="fan">
        <div class="fan__root"> <span class="top"> <label class="red" for="engine"></label> <label class="green"
                    for="engine2"></label> <label class="blue" for="jack"></label> </span> <span class="bottom"></span>
        </div>
        <div class="fan__staddle"></div> <input type="checkbox" id="jack" hidden />
        <div class="head">
            <div class="fan__engine"> <span class="center"></span> </div> <input type="checkbox" id="engine" hidden
                checked />
            <div> <span class="fly"></span> <span class="fly"></span> <span class="fly"></span>
                <div class="fan__blades"> <input type="checkbox" id="engine2" hidden checked />
                    <div class="fan__blades">
                        <div class="center"></div>
                        <div class="blade"><span></span></div>
                        <div class="blade"><span></span></div>
                        <div class="blade"><span></span></div>
                        <div class="blade"><span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    


fan-style.css :-
    
     
        html {
            overflow: hidden;
        }

        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: linear-gradient(90deg, #addfff, #fff9e8);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        body::after {
            position: absolute;
            width: 100%;
            content: "";
            height: calc(100% - 600px);
            z-index: 0;
            background: #efefef;
            bottom: 0;
        }

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

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes off {
            to {
                transform: rotate(380deg);
            }
        }

        @keyframes off2 {
            to {
                transform: rotate(880deg);
            }
        }

        @keyframes fly {
            to {
                margin-top: 50px;
            }
        }

        span {
            display: block;
        }

        .windows {
            width: 100vw;
            height: 100vh;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .window {
            flex: 1 20%;
            box-sizing: border-box;
            height: 300px;
            position: relative;
            border: 10px inset rgba(51, 51, 51, 0.2);
        }

        .window::after {
            position: absolute;
            height: 60%;
            width: 1px;
            border-radius: 10px;
            background: linear-gradient(to top, #0f80c7 20%, transparent 30%, transparent 50%, #3f7ba0 100%);
            opacity: 1;
            z-index: 5;
            top: 30px;
            left: 50%;
            transform: rotate(45deg);
            display: block;
            content: "";
        }

        .window::before {
            position: absolute;
            height: 40%;
            width: 1px;
            border-radius: 10px;
            background: linear-gradient(to top, #0f80c7 20%, transparent 10%, transparent 50%, #addfff 100%);
            opacity: 1;
            z-index: 5;
            top: 100px;
            left: 60%;
            transform: rotate(45deg);
            display: block;
            content: "";
        }

        .window:nth-child(5n - 3)::after,
        .window:nth-child(5n - 3)::before {
            opacity: 0.8 !important;
        }

        .window:nth-child(5n - 2)::after,
        .window:nth-child(5n - 2)::before {
            opacity: 0.4 !important;
        }

        .window:nth-child(5n - 1)::after,
        .window:nth-child(5n -1)::before {
            opacity: 0.3 !important;
        }

        .window:nth-child(5n)::after,
        .window:nth-child(5n)::before {
            opacity: 0.2 !important;
        }

        .fly {
            transition: 0.5s all cubic-bezier(0.04, 0.06, 0, 1.18), 1s transform;
            width: 10px;
            height: 6px;
            background: green;
            border-radius: 50%;
            position: absolute;
            animation: fly 5s alternate infinite ease-in-out;
        }

        .fly:nth-of-type(1) {
            top: -78px;
            left: -200px;
        }

        .fly:nth-of-type(2) {
            transform: translateY(-10px);
            animation-delay: 4s;
            top: 5px;
            right: -250px;
        }

        .fly:nth-of-type(3) {
            transform: translateY(0px);
            top: 400px;
            animation-delay: 2s;
            right: -400px;
        }

        .fly::after,
        .fly::before {
            content: "";
            position: absolute;
            width: 7px;
            height: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            display: block;
            border-radius: 50%;
        }

        .fly::before {
            bottom: 4px;
            transform: rotate(325deg);
            left: 3px;
        }

        .fly::after {
            transform: rotate(45deg);
            bottom: 6px;
        }

        .fan {
            width: 500px;
            height: 500px;
            position: relative;
            z-index: 1;
            margin-top: 75px;
            perspective: 500px;
        }

        .fan::after {
            content: "";
            display: block;
            position: absolute;
            height: 364px;
            width: 200px;
            background: rgba(0, 0, 0, 0.08);
            top: calc(100% - 24px);
            left: calc(50% - 100px);
            z-index: -1;
            transform: rotateX(104deg) rotateY(-1deg) rotate(25deg);
            transform-origin: top;
        }

        .fan__root {
            width: 200px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__root .top {
            overflow: hidden;
            width: 200px;
            height: 25px;
            position: relative;
        }

        .fan__root .top::after {
            content: "";
            display: block;
            width: 200px;
            height: 50px;
            background: #2f423f;
            border-radius: 50%;
        }

        .fan__root .top .red {
            position: absolute;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            right: 30px;
            background: #f15249;
            cursor: pointer;
            overflow: hidden;
        }

        .fan__root .top .green {
            position: absolute;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            right: 85px;
            background: #32ba7c;
            cursor: pointer;
            overflow: hidden;
        }

        .fan__root .top .green::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #0aa06e;
        }

        .fan__root .top .red::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #a00000;
        }

        .fan__root .top .blue {
            position: absolute;
            cursor: pointer;
            width: 30px;
            height: 15px;
            border-radius: 15px;
            display: block;
            left: 30px;
            background: #3ac2f2;
            overflow: hidden;
        }

        .fan__root .top .blue::after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background: #009cc6;
        }

        .fan__root .bottom {
            overflow: hidden;
            width: 200px;
            height: 20px;
        }

        .fan__root .bottom::after {
            content: "";
            display: block;
            width: 200px;
            height: 40px;
            background: #2f423f;
            border-radius: 18%;
            transform: translateY(-30px);
        }

        .fan__staddle {
            position: absolute;
            bottom: 45px;
            background: #2f423f;
            height: 270px;
            width: 13px;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__engine {
            position: absolute;
            bottom: 0px;
            width: 130px;
            height: 130px;
            background: #2f423f;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
        }

        .fan__engine::after {
            content: "";
            background: #2f423f;
            display: block;
            width: 25px;
            height: 50px;
            position: absolute;
            top: 105px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 5px 5px;
        }

        .fan__blades {
            width: 230px;
            height: 230px;
            position: absolute;
            bottom: -50px;
            transition: 2s;
            transform-origin: center center;
            left: calc(50% - 115px);
            z-index: 1;
            animation: spin infinite 0.38s linear forwards;
        }

        .fan__blades .fan__blades {
            bottom: 0;
            animation: spin infinite 0.5s linear forwards;
        }

        .fan__blades .blade {
            position: absolute;
            width: 50px;
            height: 100%;
            left: 50%;
            transform: translateX(-50%) skewY(25deg);
            perspective: 500px;
            transform-style: preserve-3d;
        }

        .fan__blades .blade:nth-child(2) {
            transform: translateX(-50%) rotate(90deg) skewY(25deg);
        }

        .fan__blades .blade:nth-child(3) {
            transform: translateX(-50%) rotate(180deg) skewY(25deg);
        }

        .fan__blades .blade:nth-child(4) {
            transform: translateX(-50%) rotate(270deg) skewY(25deg);
        }

        .fan__blades .blade span {
            width: 100%;
            height: 200%;
            border-radius: 44px;
            background: #ffc114;
            position: absolute;
            top: -66px;
            display: block;
            transform-style: preserve-3d;
            transform: rotateX(81deg);
            overflow: hidden;
        }

        .fan__blades .blade span::after {
            width: 50%;
            height: 100%;
            content: "";
            display: block;
            background: #fca12a;
            transform: rotate(0deg);
        }

        .fan__blades .center {
            position: absolute;
            overflow: hidden;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            background: #32ba7c;
            z-index: 2;
        }

        .fan__blades .center::after {
            display: block;
            content: "";
            width: 40px;
            height: 20px;
            background: #0aa06e;
        }

        .head {
            transition: 1s transform;
            height: auto;
            width: auto;
            position: absolute;
            width: 300px;
            height: 300px;
            bottom: 195px;
            left: calc(50% - 150px);
            /* transform: translateX(-50%); */
        }

        #engine:checked+div>div {
            animation: off2 1s ease-out forwards;
        }

        #engine:checked+div>span:nth-child(1) {
            transition: 5s all ease-in-out, 1s transform;
            left: 0px;
            top: 0px;
        }

        #engine:checked+div>span:nth-child(2) {
            transition: 5s all ease-in-out, 1s transform;
            right: 0px;
            top: 0px;
        }

        #engine:checked+div>span:nth-child(3) {
            transition: 7s all ease-in-out, 1s transform;
            right: -50px;
            top: 200px;
        }

        #engine2:checked+div {
            animation: off 1s ease-out forwards;
        }

        #jack:checked+div {
            transform: translateY(-115px);
        }

        #jack:checked+div>div:nth-child(3)>span {
            transform: translateY(115px);
        }

        @media screen and (max-width: 900px) {
            .window {
                flex: 1 25% !important;
            }
        }

        @media screen and (max-width: 800px) {
            .window {
                flex: 1 33.3333333% !important;
            }
        }

        @media screen and (max-width: 700px) {
            .window {
                flex: 1 50% !important;
            }
        }

    
  
fan.js :-
    
        alert("Use FAN'S Buttons to Operating Fan");
    

Source Post:- csspoints.com

Search
Advertisement
Share With
Follow us on
Advertisement