御医txt下载(重生之御医TXT下载)
御医电子书txt全集下载御医 txt全集小说附件已上传到百度网盘,点击免费下载:内容预览:正文第58章温馨的早餐早晨明媚的阳光,从窗外洋洋洒洒的落进来,碧玉彩霞般地铺展在空气中,吴天麟睁开眼睛,走下床...
使用了particles.js
particles.js可以从github网站下载到最新的源码,网址是
使用方法非常简单
第一步,在html中引入脚本文件 particles.min.js,这个文件在下载的压缩包里可以找到
<scriptsrc="particles.min.js"></script>第二步,在html中放入一个div容器,设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>第三步,设置窗口样式
<styletype="text/css">
#particles-js{
z-index:-1;
position:absolute;
top:0;
width:100%;
background:#aaa;
}</style>第四步,脚本生成粒子效果,可以单独放在一个js文件里,也可以放在<script>标签里。无论如何,这段脚本要出现在div容器之后。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
}
},"color":{"value":"#ffffff"
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"polygon":{"nb_sides":5
},"image":{"src":"img/github.svg","width":100,"height":100
}
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
}
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
}
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
}
}
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"resize":true
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
}
},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"duration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});
在需要添加效果的元素<>里面加上
onclick="某函数()"(鼠标点击触发效果)
onload="某函数()"(进入页面触发效果)
onchange="某函数()"(改变内容触发效果,用于文本输入框)
onmouseover="某函数()"(鼠标移动到元素上触发效果)
onmouseout="某函数()"(鼠标移除元素触发效果)
onmousedown="某函数()"(鼠标正在点击触发效果)
onmouseup="某函数()"(鼠标释放触发效果)
参考网址
例如:
<script type="text/javascript" language="javacript">
function changetext()
{
document.getElementByID("text").innerHTML="Hello Word!";
}
</script>
<a id="text" onclick="changetext()">你好!</a>
<a>元素中使用了onclick,当鼠标点击“你好!”时,会触发changetext()函数,将“你好!”变成“Hello Word!”
需要先了解JS文件里面都有什么函数以及函数的功能再使用。网上下载的一般会有注释函数的功能。
该网站中还有代码的教学
好看的前端特效动画大全整理(持续更新中:HTML+CSS+JS特效动画)
以下是精心挑选的一系列前端特效动画,涵盖了Loading加载动画、交互按钮特效、加载特效、3D游戏、自动滚动特效、网页背景动画以及文字消散特效等多个方面。这些特效动画均通过HTML、CSS和JavaScript实现,适合用于网页设计和开发中,以增强用户体验和视觉效果。
前端Loading加载动画特效
描述:一个精美的Loading加载动画,通过CSS动画和JavaScript控制,可以在网页加载时显示,提升用户等待时的体验。
图片展示:
链接:视频演示
疯狂点赞按钮JavaScript特效
描述:一个具有互动性的点赞按钮特效,当用户点击按钮时,会触发一系列动画效果,如点赞数增加、按钮颜色变化等,增强用户参与感。
图片展示:
链接:视频演示
炫彩爱心加载特效
描述:一个以爱心形状呈现的加载动画,通过CSS3动画技术实现炫彩效果,适合用于情人节、表白等场合的网页加载动画。
图片展示:
链接:视频演示
3D立体魔方游戏
描述:一个基于HTML5和CSS3的3D立体魔方游戏,用户可以通过鼠标或键盘控制魔方的旋转和移动,增加网页的互动性和趣味性。
图片展示:
链接:视频演示
jQuery+css自动垂直滚动特效
描述:一个利用jQuery和CSS实现的自动垂直滚动特效,可以用于新闻滚动、产品展示等场景,提升网页的动态效果。
图片展示:
链接:视频演示
CSS3夜晚月空网页背景视差动画
描述:一个利用CSS3实现的夜晚月空网页背景视差动画,通过滚动鼠标滚轮,背景中的月亮和星星会产生视差效果,营造出身临其境的夜空氛围。
图片展示:
链接:视频演示
烟雾文字消散特效
描述:一个具有艺术感的烟雾文字消散特效,通过CSS动画和JavaScript控制文字的消散过程,适合用于创意网页或艺术作品的展示。
图片展示:
链接:视频演示
以上特效动画均展示了前端技术的强大和多样性,通过合理的运用,可以显著提升网页的视觉效果和用户体验。同时,这些特效动画也是前端开发者学习和参考的宝贵资源。随着前端技术的不断发展,相信未来会有更多精彩和创新的特效动画涌现。
OK,本文到此结束,希望对大家有所帮助。