HTML+CSS+jquery代码实例：水波纹效果与纯HTML CSS和jquery（拿来就能用）

效果：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js">
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<script>
$(document).ready(function(){
$(".full-landing-image").ripples({resolution: 200,perturbance: 0.04,
});
});
</script><style>.full-landing-image
{width: 100%;height: 100vh;background: url(https://img.tukuppt.com/png_preview/00/11/21/QavTHpmzY6.jpg!/fw/780) no-repeat center;background-size: cover;
}</style>
</head>
<body>
<div class="full-landing-image"></div>
</body>
</html>

HTML+CSS+jquery代码实例：水波纹效果与纯HTML CSS和jquery（拿来就能用）相关推荐

html5 水波式按钮_css3+jQuery实现按钮水波纹效果
水波纹按钮 /*自定义按钮样式*/ .btns{ height: 30px; line-height: 30px; text-align: center; width: 200px; color: # ...
CSS对图片添加水波纹效果
效果: img: http://zhouyi.run:5222/api/public/admin/getFiles?id=ae6b1db1ed25bc38c266e1449120e87b.gif&am ...
css波纹波动效果,CSS 冲击波(水波纹)效果
实现冲击波--数学知识很重要 *{ margin:0; padding:0; box-sizing:border-box; } html,body{ font-family:"微软雅黑&qu ...
点击水波纹效果html5,使用CSS实现逼真的水波纹点击效果
这篇文章特别介绍如何使用CSS来完成水波纹的效果. div的层层叠叠虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
css 点击效果_使用CSS实现逼真的水波纹点击效果
这篇文章特别介绍如何使用CSS来完成水波纹的效果. div的层层叠叠虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往 ...
CSS实现水波纹效果
CSS实现水波纹效果记录如下以供以后使用效果图如下代码如下 <!DOCTYPE html> <html lang="en"> <head> ...
网页展示水波纹效果 css水波效果
网页展示水波纹效果预览思路在页面底部展示多张水波的图片,然后让每张水波以不同的方向和速度进行移动,并给不同的水波设置不同的透明度. 代码 HTML index.html <!DOCTYPE ...
android自定义水波纹,Android自定义View——实现水波纹效果类似剩余流量球(示例代码)...
最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼一:先一步一步来分解一下实现的过程需要绘制一个正弦曲线(sin)或者余弦曲线(c ...

HTML+CSS+jquery代码实例：水波纹效果与纯HTML CSS和jquery（拿来就能用）

HTML+CSS+jquery代码实例：水波纹效果与纯HTML CSS和jquery（拿来就能用）相关推荐

最新文章

热门文章