MPXVM CSS Animation for Video V2

Readme
JavaScript 1 lines
HTML 10 lines
CSS 149 lines

MPXVM CSS Animation for Video

MPXVM CSS Animation for Video V2

MPXVM CSS Animation for Video V2

html, body{ width:100%; height:100vh; }
    /*.icon {
        background: url('images/hive.png') 0 0 no-repeat;
        width: 76px; height: 76px; top: 50%;
    }*/
    .icon:hover {
        -moz-animation: rotatecircle 4s infinite linear;
        -webkit-animation: rotatecircle 4s linear;
    }
    .outerCircle {
        background-color: transparent;
        border: 9px solid rgba(197, 82, 72, 0.9);
        opacity: .9;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-radius: 210px;
        width: 263px;
        height: 263px;
        position: absolute;
        top:25%;
        left:43%;
        /*margin: 0 auto;*/
        -moz-animation: spinPulse 3s infinite ease-in-out;
        -webkit-animation: spinPulse 3s infinite ease-in-out;
    }
    .innerCircle {
        background-color: transparent;
        border: 4px solid rgba(189, 215, 111, 0.9);
        opacity: .9;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-radius: 150px;
        top: 30%;
        left: 45%;
        position: absolute;
        width: 172px;
        height: 172px;
        /*margin: 0 auto;*/
        -moz-animation: spinoffPulse 1s infinite linear;
        -webkit-animation: spinoffPulse 1s infinite linear;
    }
    @-moz-keyframes spinPulse {
        0% { -moz-transform:rotate(160deg); opacity:0.3; box-shadow:0 0 1px #bdd73c;}
        50% { -moz-transform:rotate(145deg); opacity:1; }
        100% { -moz-transform:rotate(-320deg); opacity:0.3; }
    }
    @-moz-keyframes spinoffPulse {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg);  }
    }
    @-webkit-keyframes spinPulse {
        0% { -webkit-transform:rotate(160deg); opacity:0.3; box-shadow:0 0 1px #bdd73c; }
        50% { -webkit-transform:rotate(145deg); opacity:1;}
        100% { -webkit-transform:rotate(-320deg); opacity:0; }
    }
    @-webkit-keyframes spinoffPulse {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
    }
    @-moz-keyframes rotatecircle {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(-360deg); }
    }
    @-webkit-keyframes rotatecircle {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(-360deg); }
    }
    /*
    .circle, h3 {
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
    }
    */
    .circle {
        width: 140px;
        height: 140px;
        background: #333333;
        border-radius: 90%;
        margin: 8% auto;
        position: relative;
        -moz-animation: rotatecircle 22s infinite linear;
        -webkit-animation: rotatecircle 22s infinite linear;
    }
    h3 {
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        font-weight: 900;
        font-size: 24px;
        letter-spacing: 2px;
        font-family: 'Rock Salt', cursive;
        transform: rotate(-10deg);
        padding-top: 45px;
        /*text-shadow: 1px 1px #333333;*/
    }
    /*
    .circle:hover {
    transform: rotate(360deg);
    background: #F0805B;
    cursor: pointer;
    }
    */
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /* --------------   */
    body{
        margin:0;
        transform: rotate(360deg);
        padding:0;
        font-family:"arial",heletica,sans-serif;
        font-size:12px;
        background: #ff0000 url('http://eskipaper.com/images/orange-light-wallpaper-hd-1.jpg') repeat 0 0;
        -webkit-animation: 23s linear 0s normal none infinite animate;
        -moz-animation: 23s linear 0s normal none infinite animate;
        -ms-animation: 23s linear 0s normal none infinite animate;
        -o-animation: 23s linear 0s normal none infinite animate;
        animation: 23s linear 0s normal none infinite animate;
        /*
        http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Yellow-Abstract-Widescreen-Background-Wallpaper1.jpg
        https://www.hdwallpapers.in/walls/prism_abstract-wide.jpg
        */
    }
    @-webkit-keyframes animate {
        from {background-position:0 0;}
        to {background-position: 500px 0;}
    }
    @-moz-keyframes animate {
        from {background-position:0 0;}
        to {background-position: 500px 0;}
    }
    @-ms-keyframes animate {
        from {background-position:0 0;}
        to {background-position: 500px 0;}
    }
    @-o-keyframes animate {
        from {background-position:0 0;}
        to {background-position: 500px 0;}
    }
    @keyframes animate {
        from {background-position:0 0;}
        to {background-position: 500px 0;}
    }

MPXVM CSS Animation for Video//document.getElementById('helloWorld').innerHTML = 'Hello, World!';<div> <div class="outerCircle"></div> <div class="innerCircle"></div> <div class="icon"></div> </div> <div class="center"> <div class="circle"> <h3>MPXVM<br>FUMIX</h3> </div> </div>html, body{ width:100%; height:100vh; } /*.icon { background: url('images/hive.png') 0 0 no-repeat; width: 76px; height: 76px; top: 50%; }*/ .icon:hover { -moz-animation: rotatecircle 4s infinite linear; -webkit-animation: rotatecircle 4s linear; } .outerCircle { background-color: transparent; border: 9px solid rgba(197, 82, 72, 0.9); opacity: .9; border-right: 15px solid transparent; border-left: 15px solid transparent; border-radius: 210px; width: 263px; height: 263px; position: absolute; top:25%; left:43%; /*margin: 0 auto;*/ -moz-animation: spinPulse 3s infinite ease-in-out; -webkit-animation: spinPulse 3s infinite ease-in-out; } .innerCircle { background-color: transparent; border: 4px solid rgba(189, 215, 111, 0.9); opacity: .9; border-left: 5px solid transparent; border-right: 5px solid transparent; border-radius: 150px; top: 30%; left: 45%; position: absolute; width: 172px; height: 172px; /*margin: 0 auto;*/ -moz-animation: spinoffPulse 1s infinite linear; -webkit-animation: spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg); opacity:0.3; box-shadow:0 0 1px #bdd73c;} 50% { -moz-transform:rotate(145deg); opacity:1; } 100% { -moz-transform:rotate(-320deg); opacity:0.3; } } @-moz-keyframes spinoffPulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-webkit-keyframes spinPulse { 0% { -webkit-transform:rotate(160deg); opacity:0.3; box-shadow:0 0 1px #bdd73c; } 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; } } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-moz-keyframes rotatecircle { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(-360deg); } } @-webkit-keyframes rotatecircle { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(-360deg); } } /* .circle, h3 { -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; } */ .circle { width: 140px; height: 140px; background: #333333; border-radius: 90%; margin: 8% auto; position: relative; -moz-animation: rotatecircle 22s infinite linear; -webkit-animation: rotatecircle 22s infinite linear; } h3 { text-align: center; line-height: 30px; color: #ffffff; font-weight: 900; font-size: 24px; letter-spacing: 2px; font-family: 'Rock Salt', cursive; transform: rotate(-10deg); padding-top: 45px; /*text-shadow: 1px 1px #333333;*/ } /* .circle:hover { transform: rotate(360deg); background: #F0805B; cursor: pointer; } */ .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* -------------- */ body{ margin:0; transform: rotate(360deg); padding:0; font-family:"arial",heletica,sans-serif; font-size:12px; background: #ff0000 url('http://eskipaper.com/images/orange-light-wallpaper-hd-1.jpg') repeat 0 0; -webkit-animation: 23s linear 0s normal none infinite animate; -moz-animation: 23s linear 0s normal none infinite animate; -ms-animation: 23s linear 0s normal none infinite animate; -o-animation: 23s linear 0s normal none infinite animate; animation: 23s linear 0s normal none infinite animate; /* http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Yellow-Abstract-Widescreen-Background-Wallpaper1.jpg https://www.hdwallpapers.in/walls/prism_abstract-wide.jpg */ } @-webkit-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-moz-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-ms-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-o-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} }