How to create robotics theme with animated cursor?

Hello readers,

Today in this blog you’ll learn how to create animated working cursor and robotics theme with colorful and moving animated cursor using HTML CSS & JavaScript.

In that tutorial you have seen animated cursor and effective color theme for the robotics web page. I used the CSS for styling the page I used pure JavaScript to create cursor.

If you’re a beginner, you can also create this types of animated cursor and good them according to your choice because there are no vast codes of CSS and JavaScript on this program.

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.


If you need the same background images and icons on your website you can Download Image.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>Animation For Robot By Codeithub </title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="banner">
            <div class="left-box">
                <div class="wrapper">
                    <img src="logo.png" class="logo" alt="">
                    <div class="search-box">
                        <img src="search.png" alt="">
                        <input type="text" placeholder="Search">
                    </div>
                    <div class="vertical-line"></div>
                        <ul>
                            <li><a href="#">PRODUCTION</a></li>
                            <li><a href="#">FACILITY</a></li>
                            <li><a href="#">MECHANISM</a></li>
                            <li><a href="#">OUR TEAM</a></li>
                            <li><a href="#">OUR IDEAS</a></li>
                        </ul>
                </div>
            </div>
                <div class="right-box">
                    <nav>
                        <ul>
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">ABOUT</a></li>
                            <li><a href="#">TECHNOLOGY</a></li>
                            <li><a href="#">PRODUCTS</a></li>
                        </ul>      
                    </nav>
                    <h2>The Next<br> Generation</h2>
                    <div class="robo">
                        <img src="robo.png" alt="">
                        <h1>ROBOTICS</h1>
                        <div class="features">
                            <div>
                                <small>WATCH PREVIEW</small>
                                <img src="play.png" alt="">
                            </div>
                            <div>
                                <small>THE MAKING</small>
                                <img src="settings.png" alt="">
                            </div>
                            <div>
                                <small>DOWNLOAD PDF</small>
                                <img src="download.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="circle"></div>
                    <div class="pagination">
                        <ul>
                            <li class="active"><a href="#">01</a></li>
                            <li><a href="#">02</a></li>
                            <li><a href="#">03</a></li>
                            <li><a href="#">04</a></li>
                            <li><a href="#">05</a></li>
                        </ul>
                    </div>
                    <img src="volume.png" alt="" class="volume">
            </div>
        </div>
        <div class="smallCursor"></div>
        <div class="largeCursor"></div>
        <script>
            var smallCursor= document.querySelector(".smallCursor");
            var largeCursor= document.querySelector(".largeCursor");
                document.onmousemove = function(e){
                smallCursor.style.left =(e.pageX -5) + "px";
                smallCursor.style.top =(e.pageY -5) + "px";

                smallCursor.style.display="block";

               largeCursor.style.left =(e.pageX -22) + "px";
               largeCursor.style.top =(e.pageY -22) + "px";

                largeCursor.style.display="block";
            }
        </script>

    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
*{
    margin:0px;
    padding:0px;
}
body{
    background:#000;
    color:#fff;
    font-family:sans-serif;
    overflow: hidden;
    cursor:none;
}
.banner{
    width:100%;
    height: 100vh;
    display: flex;
}
.left-box{
    flex-basis: 20%;
    background:#002e52;
}
.right-box{
    flex-basis: 80%;
    position: relative;
}
.logo{
    width:150px;
    margin:60px 0;
}
.wrapper{
    width:80%;
    margin:auto;
}
.search-box{
    display: flex;
    background:#fff;
    padding:10px 7px;
    border-radius: 20px;
}
.search-box img{
    width:18px;
    margin:auto 5px;
}
.search-box input{
    width:80%;
    border:0;
    outline:none;
    background:transparent;
    z-index: 2;
}
.vertical-line{
    width: 1px;
    height: 40vh;
    background:#797979;
    margin:30px 0 10px;
}
.wrapper ul li{
    list-style:none;
    margin:10px 0;
}
.wrapper ul li a{
    color:#797979;
    font-size: 13px;
    text-decoration: none;
}
nav{
    margin-top:60px;
    margin-left:60px;
}
nav ul{
    display:flex;
}
nav ul li{
    list-style: none;
    margin-right:70px;
}
nav ul li a{
    color:#fff;
    font-size:13px;
    text-decoration: none;
}
.right-box h2{
    margin-top:5%;
    margin-left:60px;
    font-size:60px;
    letter-spacing: 3px;
}
.robo{
    position: absolute;
    bottom:0;
    right:6%;
    height:93%;
}
.robo img{
    height: 100%;
}
.robo h1{
    position: absolute;
    top:100px;
    right:-30px;
    font-size:130px;
    color:#e2e2e2;
    opacity: 0.1;
    z-index:-1;
}
.features{
    position: absolute;
    bottom:17%;
    left: -220px;
}
.features img{
    width:50px;
    margin-left: 40px;
}
.features div{
    display: flex;
    align-items: center;
    margin-bottom:30px;
}
.features div:nth-child(2){
    margin-left: 35px;
}
.features div:nth-child(3){
    margin-left:35px;
}
.circle{
    width:180px;
    height:180px;
    border:40px solid rgba(2555,255,255,0.1);
    border-radius:50%;
    position: absolute;
    top:38%;
    left:-130px;
}
.pagination ul{
    display:flex;
    align-items: flex-end;
}
.pagination ul li{
    list-style: none;
    margin-right:20px;
}
.pagination ul li a{
    text-decoration: none;
    color:#ccc;
    font-size:12px;
    padding:10px;
    border-bottom:2px solid #fff;
}
.pagination{
    position: absolute;
    left:60px;
    bottom:5%;
}
.pagination ul li.active a{
    font-size: 22px;
    border-bottom: 5px solid #fff;
}
.volume{
    width:25px;
    position: absolute;
    right:4%;
    bottom:4%;
}
.smallCursor{
    height:10px;
    width:10px;
    background:#3fc9f5;
    border-radius: 50%;
    position: absolute;
    z-index:1;
    display:none;
}
.largeCursor{
    height:40px;
    width:40px;
    border:2px solid #3fc9f5;
    border-radius: 50%;
    position: absolute;
    z-index:1;
    display:none;
    transition-duration: 500ms;
    transition-timing-function: ease-out;
}
a{
    position: relative;
    z-index: 2;
}

Output:-

See also  Accessible Star Rating Control Using Radio Buttons

Leave a Reply

Your email address will not be published. Required fields are marked *