這次給大家帶來CSS3實現點擊放大的動畫執行個體,CSS3實現點擊放大動畫執行個體的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
最近在工作中遇到一個需求,實現的效果是當點擊商品圖片右上的收藏按鈕觸發放大動畫,後來通過尋找相關的資料,發現利用css3:@keyframes animation即可實現這個效果,下面來看看詳細的介紹吧。
技術重點css3: @keyframes animation
範例程式碼
<!DOCTYPE html><head> <style type="text/css"> @keyframes myfirst { 0% { width: 50px; height: 50px; top: 10px; right: 10px; } 75% { width: 60px; height: 60px; top: 5px; right: 5px; } 100% { width: 50px; height: 50px; top: 10px; right: 10px; } } .warp { width: 400px; height: 300px; position: relative; background: #ccc; } .btn { position: absolute; width: 50px; height: 50px; border:solid 3px #cc3c24; top: 10px; right: 10px; border-radius: 8px; cursor: pointer; } .btn.cur{ animation: myfirst 0.2s; } .btn.yes{ background: #cc3c24; } </style></head><body><p class="warp"> <p class="btn"></p></p><script src="http://liuxiaofan.com/demo/js/jquery-2.1.4.min.js"></script><script> var btn = $('.btn'); btn.click(function () { if( $(this).is('.yes')){ $(this).removeClass('yes'); $(this).removeClass('cur'); }else{ $(this).addClass('yes'); $(this).addClass('cur'); } }); btn.on('webkitAnimationEnd', function () { $(this).removeClass('cur'); });</script></body></html>
如下:
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
CSS有幾種實現三欄布局的方法
CSS實現帶箭頭流程可見進度條
用HTML+CSS實現下拉式功能表