Boton favorito twitter
Hoy Twitter se ha introducido un nuevo botón del corazón (como) , en realidad es un reemplazo para el botón favorito. Me encanta la forma de twitter ha implementado efecto fresco animación clic acción. Este puesto le explicará , cómo implementar esta utilizando CSS3 y jQuery
index
<!DOCTYPE html> <html> <head> <title>prueba / twitter </title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('body').on("click",'.heart',function() { var A=$(this).attr("id"); var B=A.split("like"); var messageID=B[1]; var C=parseInt($("#likeCount"+messageID).html()); $(this).css("background-position","") var D=$(this).attr("rel"); if(D === 'like') { $("#likeCount"+messageID).html(C+1); $(this).addClass("heartAnimation").attr("rel","unlike"); } else { $("#likeCount"+messageID).html(C-1); $(this).removeClass("heartAnimation").attr("rel","like"); $(this).css("background-position","left"); } }); }); </script> </head> <body> <div id="container"> <div style="height:125px"></div> <h3>prueba en el boton de corazon</h3> <div class="feed" id="feed1"> <p>esto es una prueba <a href="#url#=www.testing.com" target="_blank">testing.com</a></p> <div class="heart " id="like1" rel="like"></div> <div class="likeCount" id="likeCount1">14</div> </div> <div class="feed" id="feed2"> <p>datoweb<a href="#url#=www.testing.com" target="_blank"> https://datoweb.com</a></p> <div class="heart" id="like2" rel="like"></div> <div class="likeCount" id="likeCount2">10</div> </div> <div class="feed" id="feed2"> <p> google <a href="#url#=www.testing.com" target="_blank">google</a></p> <div class="heart" id="like3" rel="like"></div> <div class="likeCount" id="likeCount3">24</div> </div> </div> </body> </html>css
/*power by pablo - mattt */ body{color: #333333} #container{ margin:0 auto; width: 900px; font-family: arial; } .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:2900% } .heart:hover, .heart:focus{ background-position: right; } @-webkit-keyframes heartBlast { 0% { background-position: left; } 100% { background-position: right; } } @keyframes heartBlast { 0% { background-position: left; } 100% { background-position: right; } } .heartAnimation { display: inline-block; -webkit-animation-name: heartBlast; animation-name: heartBlast; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: steps(28); animation-timing-function: steps(28); background-position: right; } .feed p{font-family: 'Georgia', Times, Times New Roman, serif; font-size: 25px} .feed{clear: both; margin-bottom: :20px; height: 100px; position: relative;} a{color: #7ac9ed} p{margin: 0px; padding: 0px} .likeCount{font-family: 'Georgia', Times, Times New Roman, serif; margin-top: 13px;margin-left: 28px;font-size: 16px;color: #999999}estaria bueno que incrementen este codigo en la web.
saludos
Editado
1
Puntos
Puntos
1485
Visitas
Visitas
0
Resp
Resp
Por pablo hace 99 meses
Experto