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

共9个文件

css：4个

js：3个

jpg：1个

版权申诉

javascript

jQuery

html5

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

资源推荐

资源详情

资源评论

收起资源包目录

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>

评论收藏

内容反馈

版权申诉