jquerycsseffectgeometric-arc

animated Geometric effect like ie logo


I want animated Geometric effect like ie logo (yellow color) which moves around my logo.

yellow line effect


Solution

  • I wanted something like this fiddle

    <div class="logo">
    <div class="circle"></div>
    <img src="http://cdns2.freepik.com/image/th/318-31882.png" />
    </div>
    
    *{
    box-sizing:border-box;
    }
    .logo{
    width:150px;
    height:150px;
    position:relative;
    }
    .circle{
    position:absolute;
    width:100%;
    height:100%;
    border:10px solid #000;
    border-radius:100%;
    }
    .logo img{
    width:70px;
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    vertical-align:middle;
    }  
    .circle {
    -moz-animation: rotate 10s infinite 0s;
    -webkit-animation: rotate 10s infinite 0s;
    animation: rotate 10s infinite 0s;
    }
    @-webkit-keyframes rotate{
    0% {
        -moz-transform: rotate3d(50,50,0,50deg) rotate(90deg);
        -webkit-transform: rotate3d(50,50,0,50deg) rotate(90deg);    
        transform: rotate3d(50,50,0,50deg) rotate(90deg);
    }
    50% {
        -moz-transform: rotate3d(0,0,0,0deg) rotate(180deg);
        -webkit-transform: rotate3d(0,0,0,0deg) rotate(180deg);    
        transform: rotate3d(0,0,0,0deg) rotate(180deg);
    }
    100% {
        -moz-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
        -webkit-transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);    
        transform: rotate3d(-50,-50,0,-50deg) rotate(-90deg);
    }
    }