Home > Article > Web Front-end > CSS3 animation example of clicking to enlarge

CSS3 animation example of clicking to enlarge

php中世界最好的语言Original: 2018-03-22 09:56:024774browse

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>

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!

CSS3 animation example of clicking to enlarge

Related articles