CSS3實現點擊放大的動畫執行個體

來源:互聯網
上載者:User
這次給大家帶來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實現下拉式功能表

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.