本篇内容主要讲解“css3代码怎么实现点击放大动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3代码怎么实现点击放大动画效果”吧!代码如下<!DOCTYPE html
本篇内容主要讲解“css3代码怎么实现点击放大动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3代码怎么实现点击放大动画效果”吧!
代码如下
<!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>效果图如下：
css的基本语法是：
1、css规则由选择器和一条或多条声明两个部分构成；
2、选择器通常是需要改变样式的HTML元素；
3、每条声明由一个属性和一个值组成；
4、属性和属性值被冒号分隔开。
到此，相信大家对“CSS3代码怎么实现点击放大动画效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
--结束END--
本文标题: CSS3代码怎么实现点击放大动画效果
本文链接: https://www.lsjlt.com/news/348204.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0