css3animation动画制作点击波特效.zip_cssanimation涟漪动画资源-CSDN文库

共9个文件

css：4个

js：3个

jpg：1个

版权申诉

javascript

jQuery

html5

42 浏览量 2022-11-16 21:21:23 上传评论收藏 129KB ZIP 举报

在前端开发领域，CSS3（层叠样式表第三版）为网页设计师提供了强大的动画功能，使得动态效果的创建变得更为简单。本项目“css3 animation动画制作点击波特效.zip”显然是一个关于如何利用CSS3的animation属性来创建点击波纹特效的示例。这种特效常见于按钮或元素被点击时，呈现出一种向外扩散的涟漪效果，增强了用户的交互体验。我们需要理解CSS3的`@keyframes`规则，这是创建动画的基础。`@keyframes`定义了一个动画的过程，通过设置不同的时间点（百分比）来控制元素的样式变化。例如： ```css @keyframes rippleEffect { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(2); opacity: 0.6; } 100% { transform: scale(1); opacity: 0; } } ``` 这段代码定义了一个名为`rippleEffect`的动画，它描述了元素在点击后从原始大小（0%）放大到两倍大小（50%），同时透明度降低，然后逐渐恢复原状（100%），整个过程伴随着透明度的变化。接下来，我们需要将这个动画应用到HTML元素上。通常，我们会创建一个伪元素（如`:before`或`:after`）来承载这个效果，因为这样可以避免对实际内容的影响。例如： ```html <button class="ripple">点击我</button> ``` ```css .button.ripple::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); /* 可根据需要调整颜色和透明度 */ border-radius: inherit; /* 保持与按钮相同的圆角 */ transform: scale(0); pointer-events: none; opacity: 0; transition: all 0.5s; } .button.ripple:active::before { animation: rippleEffect 0.5s ease-out forwards; } ``` 这里，我们给按钮添加了一个`::before`伪元素，并设置了初始状态。当按钮被按下（`:active`状态）时，`::before`元素会执行`rippleEffect`动画，呈现出点击波纹效果。 JavaScript（如jQuery）也可以用于增强这个效果，例如监听点击事件并手动触发动画。不过，这个案例中主要依赖CSS3实现，因此JavaScript部分可能相对简单，主要用于处理交互细节或者兼容性问题。 "css3 animation动画制作点击波特效.zip"这个项目将帮助开发者学习如何利用CSS3的`@keyframes`和伪元素创建出具有视觉吸引力的点击波纹效果，这对于提升网页的用户体验和设计感非常有帮助。通过深入理解和实践，开发者可以进一步掌握前端动效设计的技巧，为自己的项目增添更多生动的元素。

资源推荐

资源详情

资源评论

收起资源包目录

css3 animation动画制作点击波特效.zip （9个子文件）

css3 animation动画制作点击波特效

jiaoben4189

css

zzsc-demo.css 5KB

jquery.rippleria.css 420B

normalize.css 2KB

jquery.rippleria.min.css 330B

img

girl.jpg 90KB

index.html 5KB

jquery.rippleria.js 3KB

jquery.rippleria.min.js 2KB

jquery-2.1.1.min.js 82KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3 animation动画制作点击波特效 - 网页模板</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/zzsc-demo.css"> <link rel="stylesheet" href="css/jquery.rippleria.css"> <style type="text/css"> * { outline: none!important; } .btn { border-radius: 0; text-transform: uppercase; } .btn-sample { color: #ffffff; background-color: #9B4DCA; border-color: #743997; } .btn-sample:hover, .btn-sample:focus, .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { color: #ffffff; background-color: #743997; border-color: #743997; } .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { background-image: none; } .btn-sample.disabled, .btn-sample[disabled], fieldset[disabled] .btn-sample, .btn-sample.disabled:hover, .btn-sample[disabled]:hover, fieldset[disabled] .btn-sample:hover, .btn-sample.disabled:focus, .btn-sample[disabled]:focus, fieldset[disabled] .btn-sample:focus, .btn-sample.disabled:active, .btn-sample[disabled]:active, fieldset[disabled] .btn-sample:active, .btn-sample.disabled.active, .btn-sample[disabled].active, fieldset[disabled] .btn-sample.active { background-color: #9B4DCA; border-color: #743997; } .btn-sample .badge { color: #9B4DCA; background-color: #ffffff; } pre { background-color: white; border-radius: 0; } #rippleria img { width: 100%; height: auto; } </style> </head> <body> <div class="zzsc-container"> <div class="zzsc-content"> <section class="container"> <h3 class="text-center">按钮的点击波效果：</h3> <div class="col-md-8 col-md-offset-2"> <pre> <code class="html"> <button data-rippleria class="button">Click Me!</button> <button data-rippleria class="button button-outline rippleria-dark">And Me!</button></code></pre></div> </div> <p class="text-center"> <button data-rippleria class="btn btn-lg btn-sample">点击我查看效果</button> <button data-rippleria class="btn btn-lg btn-default rippleria-dark">反色效果</button> </p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h3 class="text-center">自定义动画曲线：</h3> <pre> <code class="html"> <button data-rippleria data-rippleria-color="rgba(100,178,53,.35)" data-rippleria-duration="1000" data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)" class="btn btn-lg btn-default">Custom</button></code></pre></div> </div> <p class="text-center"> <button data-rippleria data-rippleria-color="rgba(100,178,53,.35)" data-rippleria-duration="1000" data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)" class="btn btn-lg btn-default">自定义动画曲线</button> </p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h3 class="text-center">图片点击波效果：</h3> <div class="text-center"> <a style="display: inline-block;" id="rippleria" href="#"> <img src="img/girl.jpg" alt="image"> </a> </div><br> <pre><code class="html"><div class="text-center"> <a style="display: inline-block;" id="rippleria" href="#"> <img src="http://www.lovethispic.com/uploaded_images/15163-Pretty-Girl.jpg" alt="image"> </a> </div> <script> function randInt(min, max) { var rand = min + Math.random() * (max - min) rand = Math.round(rand); return rand; } $('#rippleria').rippleria({ // aniamtion speed duration: 750, // custom easing effect easing: 'linear', // custom color color: undefined }); $('#rippleria').click(function(e) { e.preventDefault(); $(this).rippleria('changeColor', 'rgba('+randInt(0,255)+','+randInt(0,255)+','+randInt(0,255)+',0.'+randInt(3,5)); }); </script></code></pre> </div> </div> </section> </div> </div> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/jquery.rippleria.js"></script> <script> function randInt(min, max) { var rand = min + Math.random() * (max - min) rand = Math.round(rand); return rand; } $('#rippleria').rippleria({ // aniamtion speed duration: 750, // custom easing effect easing: 'linear', // custom color color: undefined }); $('#rippleria').click(function(e) { e.preventDefault(); $(this).rippleria('changeColor', 'rgba('+randInt(0,255)+','+randInt(0,255)+','+randInt(0,255)+',0.'+randInt(3,5)); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉