CSS3实现点击放大的动画实例代码
发布时间：2017-02-27 17:12:20 作者：爱前端 
我要评论
我要评论这篇文章主要给大家介绍了关于利用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>
<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>
效果图如下：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
一个图片点击放大显示lightbox效果，纯CSS3实现，无需任何JS代码2013-05-09
这是一款基于纯css3实现的鼠标悬停放大图片，同时其他图片模糊效果源码。鼠标滑过图片可呈现出图片放大及文字说明显示的效果，同时其他图片呈现出模糊的特效2016-12-25- 本文给大家分享一段css3代码实现鼠标浮动放大图片效果，代码中无需js和jquery代码，非常不错，具有参考借鉴价值，感兴趣的朋友参考下吧2016-11-21
CSS3实现圆形图片鼠标悬停图片旋转放大特效源码是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。本段代码适应于所有网页使用，有需要的朋友可以直接下载2016-08-30
CSS3实现鼠标悬停照片墙放大特效源码是一款图片默认3行4列排列，鼠标经过突出方法显示图片。大家对此效果非常心动不妨前来下载使用2016-04-13
是一段实现了鼠标经过图片后图片会进行缩小显示，而滑过图片后该图片就会放大成原装的效果代码，本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用2015-05-11
是一段实现了一个大圆中拥有五个有图片的小圆，而将鼠标放到某一个小圆上时，后面的大圆中就会出现与该小圆中的图片相连的大图图片的效果，CSS3实现五点式图片放大镜是一款2015-03-10
今天我们要来分享一款简单实用的CSS3鼠标滑过图片放大特效，我们可以将它应用在相册中，我们可以将鼠标移到图片上进行快速预览相片，你也可以扩展它，比如给图片加投影和边2014-12-24
今天我们要来分享一款很酷的CSS3图片特效，这款图片特效可以利用鼠标滑过图片使其悬停放大，并使图片的周围出现发光的效果。配合黑色的背景，这款CSS3图片悬停放大效果显得2014-12-03
鼠标在菜单上悬停时菜单整体放大显示，鼠标离开，菜单缩小，整体效果无需JS，完全依靠样式实现2013-08-23
最新评论