css3 动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css"> .model_info_btn{display: inline-block;padding: 10px 20px;margin-top: 25px;margin-right: 20px;background: #ff8900;color: #fff;font-size: 15px;font-family: "microsoft yahei";box-shadow: 1px 1px 3px #999;text-decoration: none;} .model_info_btn:hover{color: #fff;background: #ff7800;} .model_info_btn.unusable{background: #aaa;} @-webkit-keyframes tadaing{0%{-webkit-transform:scale(1);} 10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);}} @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);}} @-webkit-keyframes tada{0%{-webkit-transform:scale(2);} 10%, 20%{-webkit-transform:scale(1.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(2.1) rotate(3deg);} 40%, 60%, 80%{-webkit-transform:scale(2.1) rotate(-3deg);} 100%{-webkit-transform:scale(2) rotate(0);}} @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);}} .tadaing:hover{-webkit-animation: tadaing 1s .2s ease both;-moz-animation: tada 1s .2s ease both;} .skinimg:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;} .inside_letter_btn:hover .skinimg{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;} </style> <style> @-webkit-keyframes shake { 0%{ -webkit-transform:translate(2px, 2px); } 25%{ -webkit-transform:translate(-2px, -2px); } 50%{ -webkit-transform:translate(0px, 0px); } 75%{ -webkit-transform:translate(2px, -2px); } 100%{ -webkit-transform:translate(-2px, 2px); } } @keyframes shake { 0%{ transform:translate(2px, 2px); } 25%{ transform:translate(-2px, -2px); } 50%{ transform:translate(0px, 0px); } 75%{ transform:translate(2px, -2px); } 100%{ transform:translate(-2px, 2px); } } .shake:hover{ -webkit-animation:shake 0.2s infinite; animation:shake 0.2s infinite; } </style> </head> <body style="padding-left:20px"> <a href="javascript:void(0)" class="model_info_btn inside_letter_btn tadaing">发私信约Ta</a> <a href="javascript:void(0)" class="model_info_btn inside_letter_btn">发私信<span class="skinimg">约</span>Ta</a> <a href="javascript:void(0)" class="model_info_btn inside_letter_btn shake">控制不住焚寂煞气</a> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » css3 动画