Twitter likes Red Heart button CSS3 animation special effect

PetitQ Other codes 2019-5-16 7.01K zero forty-seven

Collection

This is a very cool simulation of the Twitter "Like" Red Heart button CSS3 animation special effect. The "Like" special effect uses a heart shaped button. When the user clicks the heart shaped button, the heart shaped button changes from gray to red, and at the same time, it will produce a fireworks explosion effect around the heart shaped button.

HTML Structure

The HTML structure of the "Like" red heart button is to place the heart button behind or below a hyperlink. Its HTML results are as follows:

Want to be here? contact us bar

```
 < div class = "feed" id = "feed1" >
```

   < p > JQuery Home < a href = " http://www.htmleaf.com/ " > http : //www.htmleaf.com/</a></p>

   < div class = "heart" id = "like3" rel = "like" ></ div >

   < div class = "likeCount" id = "likeCount3" > twenty-four </ div >

```
 </ div >
```

CSS style

The whole "Like" fireworks explosion effect is actually achieved by continuous playback of background pictures. It uses a long Sprite picture, and then clicks the Red Heart button to play frame by frame. The following is the CSS style for displaying the first frame at the beginning:

```
 .heart  {
```

   background :  url ( images/web_heart_animation.png ) ;

```
   background-position :  left ;
```
```
   background-repeat :  no-repeat ;
```
```
   height :  50px ;
```
```
   width :  50px ;
```
```
   cursor :  pointer ;
```
```
   position :  absolute ;
```
```
   left : -14px ;
```

   background-size : 1450px ; //Actual background picture size 2900px

```
 }
```
```
 .heart : hover {
```

   background-position :  right ; //Display the last red heart frame

```
 }
```
```
 .likeCount {
```
```
   margin-top :  13px ;
```
```
   margin-left :  28px ;
```
```
   font-size :  16px ;
```
```
   color :  #999999
```
```
 }
```

The following code is to play the red heart background picture frame by frame, which is completed using CSS3 keyframe frame animation.

```
 @-webkit-keyframes heartBlast {
```

   0%  { background-position :  left ; }

   100%  { background-position :  right ; }

```
 }
```
```
  
```
```
 @keyframes heartBlast {
```

   0%  { background-position :  left ; }

   100%  { background-position :  right ; }

```
 }
```
```
  
```
```
 .heartAnimation  {
```

 -webkit-animation-name : heartBlast ; //Webkit kernel browser

```
   animation-name : heartBlast ;
```
```
 -webkit-animation-duration :  .8s ;
```
```
   animation-duration :  .8s ;
```

 -webkit-animation-iteration-count :  one ;

```
   animation-iteration-count :  one ;
```

 -webkit-animation-timing-function :  steps ( twenty-eight ) ; //Of twenty-eight Background picture frames

   animation-timing-function :  steps ( twenty-eight ) ;

```
   background-position :  right ;
```
```
 }
```

JavaScript

In this "Like" Red Heart animation effect, jQuery code is used to link the Red Heart button with the corresponding total number of likes when clicked. You can use ajax to operate the database. When the user likes, the total quantity will be increased by 1, and when the user cancels the like, the total quantity will be decreased by 1.

```
 < script >
```

 $ ( document ) . ready ( function ( ) {

 $ ( 'body' ) . on ( "click" , '.heart' , function ( ) {

     var A = $ ( this ) . attr ( "id" ) ;

     var B = A . split ( "like" ) ;  //splitting like1 to 1

```
     var messageID = B [ one ] ;
```

 $ ( this ) . css ( "background-position" , "" )

     var D = $ ( this ) . attr ( "rel" ) ;

```
  
```
```
 $ . ajax ( {
```
```
 type :  "POST" ,
```
```
 url :  "message_like_ajax.php" ,
```
```
 data : dataString ,
```
```
 cache :  false ,
```
```
 success :  function ( data ) {
```

 $ ( "#likeCount" + messageID ) . html ( data ) ;

```
       if ( D ===  'like' )  {
```

 $ ( this ) . addClass ( "heartAnimation" ) . attr ( "rel" , "unlike" ) ;  //applying animation class

```
       }
```
```
       else {
```

 $ ( this ) . removeClass ( "heartAnimation" ) . attr ( "rel" , "like" ) ;

 $ ( this ) . css ( "background-position" , "left" ) ;

```
       }
```
```
     } ) ;  //ajax end
```
```
  
```
```
   } ) ; //heart click end
```
```
  
```
```
 } ) ;
```
```
 </script>
```

Twitter likes Red Heart button CSS3 animation special effect

1753 people have bought

Permanent update:
Demo data:

The download price of this resource is

one

element

Buy Now

(VIP free)

View Demo Upgrade VIP Buy Now

Demo Address

Download address

Cool enterprise website building works display WordPress Chinese template

Supro - minimalist e-commerce website template WordPress Chinese theme

Photo - Full screen photo album product display website WordPress Chinese theme

Other codes

Twitter likes Red Heart button CSS3 animation special effect

HTML Structure

CSS style

JavaScript

Twitter likes Red Heart button CSS3 animation special effect

Related articles

3D cube effect based on WEBGL

Bootstrap cool airplane runway style progress bar animation special effect

Pure CSS production cartoon Simpson family animation special effects

Post reply Cancel Reply

Hot selling template