CSS3實(shí)現(xiàn)點(diǎn)擊放大的動畫實(shí)例代碼

2024-07-11 08:58:16

字體：大中小

供稿：網(wǎng)友

前言

最近在工作中遇到一個需求，實(shí)現(xiàn)的效果是當(dāng)點(diǎn)擊商品圖片右上的收藏按鈕觸發(fā)放大動畫，后來通過查找相關(guān)的資料，發(fā)現(xiàn)利用css3:@keyframes animation即可實(shí)現(xiàn)這個效果，下面來看看詳細(xì)的介紹吧。

技術(shù)重點(diǎn)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><div class="warp">    <div class="btn"></div></div><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>

效果圖如下：