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:024738browse
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!
Recommended reading:
There are several ways to implement a three-column layout in CSS
CSS implements visible progress with arrows Article
Use HTML+CSS to implement drop-down menu
The above is the detailed content of CSS3 animation example of clicking to enlarge. For more information, please follow other related articles on the PHP Chinese website!