Share a jquery-Based Circular Animation button and jquery circle

Share a jquery-Based Circular Animation button and jquery circle

I have previously introduced a circular rotation sharing button implemented by pure css3. Today we will bring you a jquery-Based Circular Animation button. This button is circled with the border when the mouse passes through, and then the message is gradually received. A demo of four colors is provided in the instance. As follows:

Download Online Preview source code

Implementation code.

Html code:

 <figure class='red'>        <div class='icon'>            i</div>        <div class='circle'>        </div>    </figure>    <figure class='blue'>        <div class='icon'>            j</div>        <div class='circle'>        </div>    </figure>    <figure class='green'>        <div class='icon'>            g</div>        <div class='circle'>        </div>    </figure>    <figure class='orange'>        <div class='icon'>            h</div>        <div class='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, reprint please indicate the original address: http://www.w2bc.com/Article/8078

I used jquery to make a mouse over a button. This button will become more animated, but it will lead to confusion in the subsequent formats.

Which of the following are the three effects?
1. Only the text becomes larger?
2. The button effect increases, but the visual effect does not cover other buttons
3. The buttons become larger and cover the buttons on both sides.

Three effects are met at a time, preferably absolute positioning.
The advantage is that it meets your requirements. The disadvantage is that you need to determine the coordinates and width.
1. Remove the original float, add the css element position: absolute, and set the height, width, left, and top. The outsourcing element css assigns the position: relative value.
2. When a hover event is triggered, the width, height, and z-index of the button are increased, and left is halved.

How to Use jquery to dynamically create a button?

$ ("# Id"). append ();
$ ("# Id" pai.html ();

Get Id and add dom