Skip to main content

Css Trick Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    #sweet
    {
   /*position: fixed;
   margin: 0 45%;
   top: 10em;*/
   bottom:0px;
        right:0px;
   position:fixed;
    }

    .intro {
   background-color: #fff;
   border: 2px dotted #f46;
   box-shadow: 0 0 18px hsla(0,0%,0%,.5);
   width: auto;
   height: auto;
   -webkit-animation: round 3s linear infinite;
   transition: border-radius 0.3s linear;
    }

    .outro {
   background-color: #1f1f24;
   margin: 0px;
   border: 5px solid #c16;
   border-radius: 0px;
   width: auto;
   height: auto;
   box-shadow: 0 0 18px hsla(0,0%,0%,.5);
   -webkit-animation: rounddd 9s linear infinite;
   transition: border-radius 0.3s linear;
    }

    .intro:hover {
   border-radius: 35%;

    }

    .outro:hover {
   border-radius: 50%;
    }


@-webkit-keyframes round {
    0% {-webkit-transform: rotate(720deg);
   -moz-transform: rotate(720deg);
   -ms-transform: rotate(720deg);
   -o-transform: rotate(720deg);
   transform: rotate(720deg);
    }

    100% {-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
    }
    }

    @-webkit-keyframes rounddd {
    0% {-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
    }

    100% {-webkit-transform: rotate(720deg);
   -moz-transform: rotate(720deg);
   -ms-transform: rotate(720deg);
   -o-transform: rotate(720deg);
   transform: rotate(720deg);
    }
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="someElem">
    </div>
    <div>
        <div id="sweet" align="center">
            <div class="outro">
                <div class="intro">
                    <div class="outro">
                        <div class="intro">
                            <div class="outro">
                                <div class="intro">
                                    <div class="outro">
                                        <div class="intro">
                                            <div class="outro">
                                                <div class="intro">
                                                    <div class="outro">
                                                        <div class="intro">
                                                            <div class="outro">
                                                                <div class="intro">
                                                                    <div class="outro">
                                                                        <div class="intro">
                                                                            <div class="outro">
                                                                                <div class="intro">
                                                                                    <div class="outro">
                                                                                        <div class="intro">
                                                                                            <div class="outro">
                                                                                                <div class="intro">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

DEMO


DEMO

Comments

Post a Comment