Share a circular animation button based on jquery

Before you introduced a pure CSS3 implementation of the circular rotation share button. Today we are going to bring you a circular animation button based on jquery. This button mouse passes through the border in circles, and then gradually message, in the instance gave four colors of the demo. As follows:

Online preview Source Download

The implemented code.

HTML code:

 < Figureclass= ' Red '>        <Divclass= ' Icon '>I</Div>        <Divclass= ' Circle '>        </Div>    </ Figure>    < Figureclass= ' Blue '>        <Divclass= ' Icon '>J</Div>        <Divclass= ' Circle '>        </Div>    </ Figure>    < Figureclass= ' green '>        <Divclass= ' Icon '>g</Div>        <Divclass= ' Circle '>        </Div>    </ Figure>    < Figureclass= ' Orange '>        <Divclass= ' Icon '>h</Div>        <Divclass= ' Circle '>        </Div>    </ Figure>

CSS code:

. Blue Circle{background:#0000ff;Border-color:#0000ff;}. Blue:hover. Circle{Border-right-color:#0000ff;}. blue:hover. Icon{Color:#0000ff;}. Green Circle{background:#00cc00;Border-color:#00cc00;}. Green:hover. Circle{Border-right-color:#00cc00;}. green:hover. Icon{Color:#00cc00;}. Orange. Circle{background:#ff6000;Border-color:#ff6000;}. Orange:hover. Circle{Border-right-color:#ff6000;}. orange:hover. Icon{Color:#ff6000;}Body{Height:100%;width:100%;margin:100px Auto;width:100%;Padding-left:25px;text-align:Center;Overflow:Hidden;} Figure{cursor:Pointer;Display:Inline-block;Margin-right:60px;position:relative;width:80px;Height:80px;}. Circle{position:Absolute;Top:0; Left:0;width:100%;Height:100%;Border-radius:47.05882px;background:#dd0000;transition:background. 5s Linear;Border:2px solid #dd0000;backface-visibility:Hidden;}Figure:hover. Circle{Border-color:Transparent;background:#fff;Animation:Hoorai Cubic-bezier (0.18, 0.14, 0.29, 1) 1s;Animation-fill-mode:forwards;Border-right-color:#dd0000;}. Icon{position:Absolute;Top:0; Left:0;Z-index:2;width:100%;Height:100%;font-family:' Fontello ';font-size:32px;Color:#fff;text-align:Center;Line-height:84px;Margin-left:2px;transition:color. 5s Linear;}figure:hover. Icon{Color:#dd0000;}@keyframes Hoorai{0% {Transform:Rotate ( -90deg);Opacity:1.0; }50%{Opacity:1.0; }100%{Transform:Rotate (360deg);Opacity:0.0; }}

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/8078

Share a circular animation button based on jquery