Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <div id="js-vue" @mouseover="water" @mouseout="water"> <svg class="svg" xmlns="http://www.w3.org/2000/svg"> <filter id="filter_1"> <feTurbulence id="js-fe_turbulence_1" type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1"></feTurbulence> <feDisplacementMap id="js-fe_displacement_map_1" in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap> </filter> <filter id="filter_2"> <feTurbulence id="js-fe_turbulence_2" type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1"></feTurbulence> <feDisplacementMap id="js-fe_displacement_map_2" in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap> </filter> <filter id="filter_3"> <feTurbulence id="js-fe_turbulence_3" type="turbulence" baseFrequency="0.01" numOctaves="1" seed="1"></feTurbulence> <feDisplacementMap id="js-fe_displacement_map_3" in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap> </filter> </svg> <div class="water water_1">water</div> <div class="water water_2">water</div> <div class="water water_3">water</div> </div>
css
body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); color: rgba(100, 200, 255, 0.7); font-family: 'Dosis', sans-serif; font-size: 8rem; } .svg { display: none; } .water { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: linear-gradient(180deg, #ffffff, #ffffff, #0000ff); -webkit-background-clip: text; background-clip: text; text-fill-color: transparent; opacity: 0.8; cursor: pointer; } .water_1 { -webkit-filter: url(#filter_1); filter: url(#filter_1); } .water_2 { -webkit-filter: url(#filter_2); filter: url(#filter_2); } .water_3 { -webkit-filter: url(#filter_3); filter: url(#filter_3); opacity: 0.3; }
JavaScript
new Vue({ el: '#js-vue', data: function data() { return { duration: 5000 }; }, computed: {}, mounted: function mounted() { this.water(); this.duration = 2000; }, methods: { water: function water() { anime({ targets: ['#js-fe_turbulence_1', '#js-fe_displacement_map_1'], baseFrequency: [0.03, 0], scale: [20, 0], duration: this.duration, easing: 'easeOutCubic' }); anime({ targets: ['#js-fe_turbulence_2', '#js-fe_displacement_map_2'], baseFrequency: [0.2, 0], scale: [20, 0], duration: this.duration * 2, easing: 'easeOutCubic' }); anime({ targets: ['#js-fe_turbulence_3', '#js-fe_displacement_map_3'], baseFrequency: [0.1, 0], scale: [40, 0], duration: this.duration * 3, easing: 'easeOutCubic' }); } } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载，需支付20jQ币
开通后，在线代码模块中所有代码可终身免费下！
您已开通在线代码永久免费下载,关闭提示框后，点下载代码可直接下载！
您已经开通过在线代码永久免费下载
对不起，您的jQ币不足！可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标悬停水流效果-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号