CSS3 animation example of clicking to enlarge-CSS Tutorial-php.cn

CSS3 animation example of clicking to enlarge

php中世界最好的语言

Release： 2018-03-22 09:56:02

Original

4774 people have browsed it

This time I will bring you an animation example of CSS3 to achieve click-to-zoom animation. What are the precautions for CSS3 to implement click-to-zoom animation example. The following is a practical case, let's take a look.

Preface

Recently I encountered a need at work. The effect is to trigger an enlargement animation when the collection button on the upper right side of the product image is clicked. Later, after searching for relevant information, I found that this effect can be achieved by using css3:@keyframes animation. Let’s take a look at the detailed introduction.

Technical focus css3: @keyframes animation

Sample code

<!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>

Copy after login

The rendering is as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!