Skip to main content

All Solution Code of CodeChef May Long Challenge 2021

competitve programming solution here...

JARVIS Animation using HTML and CSS

 

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jarvis animation with html</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    
</head>
<body>
    <div id="overlay">
        <div class="container">
            <div class="cursor"></div>
            <div class="big circle"></div>
            <div class="outermost circle"></div>
            <div class="outer circle"></div>
            <div class="middle circle"></div>
            <div class="middle2 circle"></div>
            <div class="middle3 circle"></div>
            <div class="inner circle"></div>
            <div class="innermost3 circle"></div>
            <div class="innermost2 circle"></div>
            <div class="innermost circle"></div>
        </div>
    </div>
</body>
</html>

---------------------------------------------------------------------------------------
CSS Code
*{
    box-sizingborder-box;
}

#overlay {
    backgroundblack;
    positionfixed;
    top0;
    bottom0;
    left0;
    right0;
    z-index999;
}
.container{
    positionfixed;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    
}

.cursor {
    width20px;
    height20px;
    border1px solid white;
    border-radius50%;
    positionabsolute;
    topcalc(50% - 9px);
    leftcalc(50% - 9px);
    transformtranslate(-50%,-50%);
    animation: cursorAnim 0.5s infinite alternate;
}

.cursor::after {
    content"";
    width20px;
    height20px;
    positionabsolute;
    border8px solid #0088ff;
    border-radius50%;
    opacity.6;
    top-9px;
    left-9px;
    transformtranslate(-50%,-50%);
    animation: cursorAnim2 .18s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transformscale(.8);
    }
    to {
        transformscale(1.4);
    }
}
@keyframes cursorAnim2 {
    from {
        transformscale(1);
    }
    to {
        transformscale(.6);
    }
}

.circle{
    border-radius50%;
}

.bg{
    width300px;
    height300px;
    background-colorblack;
    bordersolid 5px #0088ff;

}
.big{
    width277px;
    height270px;
    backgroundblack;
    bordersolid 2px rgba(0000);
    border-bottomsolid 2px #0088ff;
    border-leftsolid 2px #0088ff;
    border-topsolid 2px #0088ff;
    border-rightsolid 2px #0088ff;
}
.outermost{
    width255px;
    height255px;
    bordersolid 10px rgba(0000);
    border-bottomsolid 10px #0088ff;
    border-leftsolid 10px #0088ff;   
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    animation: spin 30s linear infinite;
}
.outer{
    width250px;
    height250px;
    bordersolid 5px #0088ff;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    animation: spin 30s linear infinite;
}
.middle{
    width215px;
    height215px;
    bordersolid 12px rgba(0000);
    border-bottomsolid 12px #005aa8;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%rotate(45deg);
    animation: spin2 20s linear infinite reverse;
}
.middle2{
    width215px;
    height215px;
    bordersolid 6px rgba(0000);
    border-topsolid 6px #005aa8;
    border-rightsolid 6px #005aa8;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    animation: spin 20s linear infinite reverse;
}       
.middle3{
    width205px;
    height205px;
    bordersolid 30px rgba(0000);
    border-topsolid 30px #0088ff4b;
    border-rightsolid 30px #0088ff4b;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    animation: spin 20s linear infinite reverse;
}
.inner{
    width140px;
    height140px;
    bordersolid 5px #0088ff;
    border-bottomsolid 5px #000000;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%rotate(45deg);
    animation: spin2 20s linear infinite;
}   

.innermost2{
    width80px;
    height80px;
    bordersolid 13px #0088ff;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
}
.innermost{
    width117px;
    height117px;
    bordersolid 13px #0088ff;
    border-topsolid 13px #000000;
    border-bottomsolid 13px #000000;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    animation: spin2 20s linear infinite reverse;
}

@keyframes spin{
    0% {
        transformtranslate(-50%,-50%rotate(0deg);
    }
    100% {
        transformtranslate(-50%,-50%rotate(360deg);
    }
}
@keyframes spin2{
    0% {
        transformtranslate(-50%,-50%rotate(45deg);
    }
    100% {
        transformtranslate(-50%,-50%rotate(405deg);
    }
}

Comments

Popular posts from this blog

solution code of Valid Paths problem number-7 of may long challenge codechef

 Valid Paths Problem Solution Code: CodeChef Solution Code #include <bits/stdc++.h> using   namespace   std ; #define   ll   long   long #define   f ( i ,  a ,  b )  for ( int  i = a; i < b; i ++ ) #define   mod   1000000007 #define   mk   make_pair #define   uniq ( v ) (v). erase ( unique ( all (v)), (v). end ()) #define   ff  first #define   ss  second #define   rf ( i ,  a ,  b )  for ( int  i = a;i >= b;i -- ) #define   sc ( a )  scanf ( " %lld " ,  & a) #define   pf   printf #define   sz ( a ) ( int )(a. size ()) #define   psf  push_front #define   ppf  pop_front #define   ppb  pop_back #define   pb  push_back #define   pq  priority_queue #define   all ( s ) s. begin (),s. end () #define   sp ( a )  setprecision (a)...

solution code of An Interesting Sequence problem number-8 of may long challenge codechef

An Interesting Sequence Problem Solution Code: CodeChef #include   <bits/stdc++.h> using   namespace   std ; #define   endl   " \n " int   main () {     cin. tie ( 0 );      int  N  =   4 e 6   +   5 ;      int  phi[N], ans[N];      for  ( int  i  =   0 ; i  <  N; i ++ )     {         phi[i]  =  i;         ans[i]  =   0 ;     }      for  ( int  p  =   2 ; p  <  N; p ++ )     {          if  (phi[p]  ==  p)         {            ...

solution code of Tree House problem number-6 of may long challenge codechef

 Tree House Problem Solution Code: CodeChef Solution Code #pragma   GCC   optimize (" Ofast ", " unroll-loops ") #include   <bits/stdc++.h> using   namespace   std ; #define   int   long   long   int #define   double   long   double using   pii   =   pair < int ,  int >; template  < typename   T > using   Prior   =   std :: priority_queue < T ,  vector < T >,  greater < T >>; #define   X  first #define   Y  second #define   eb  emplace_back #define   ALL ( x )  begin (x),  end (x) #define   RALL ( x )  rbegin (x),  rend (x) #define   fastIO ()  ios_base ::sync_with_stdio, cin. tie ( 0 ) mt19937_64  rng( chrono :: steady_clock :: now (). time_since_epoch (). count ()); inline   int   getRand ( int   L ,  int   R ) { ...