HTML+css+js萤火虫动态按钮（学习日志）

利用简单的代码写一个让人眼前一亮的效果，注意选暗一点的背景图片效果更加。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><title>萤火虫动态按钮</title>
</head>
<style>* {padding: 0;margin: 0;}body {height: 100vh;background: url(image/yh.bmp) no-repeat;background-size: cover;}ul {list-style: none;}button {outline: none;border: none;}.firefly {width: 180px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: linear-gradient(to right, #6EB46E 10%, #55B455);border-radius: 40px;opacity: .88;cursor: pointer;transition: 1s;}.firefly:hover {box-shadow: 0 0 100px #B4FFB4;}.firefly p {line-height: 60px;font-size: 22px;color: #F5DD8F;font-family: firefly;opacity: .88;}.lightning {width: 95%;height: 80%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 40px;transition: .8s;overflow: hidden;}.firefly:hover .lightning {box-shadow: 0 0 4px #B4FFB4 inset;}.lightning ul {opacity: 0;transition: .8s;}.firefly:hover ul {opacity: .8;}.lightning ul li {width: 5px;height: 5px;background-color: #91FA91;position: absolute;bottom: 10%;border-radius: 50%;opacity: .6;animation: fireflymove infinite linear;}@keyframes fireflymove {100% {bottom: 100%;}}
</style>
<body><button class="firefly"><p>萤火虫</p><div class="lightning"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></button>
</body>
<script>var lgh = $('.lightning li').length;$('.lightning li').each(function(i) {$(this).css({left: i * (100/lgh) + '%',bottom: randomNum(-20, 10) + '%',animationDuration: randomNum(1, 5) + 's'});});function randomNum(max, min) {var num = Math.floor(Math.random() * (max-min+1) + min);return num;}
</script>
</html>

效果图

背景图片：

HTML+css+js萤火虫动态按钮相关推荐

基于html+css+js实现动态时钟
参照B站的一个视频,利用html+css+js实现了动态时钟. 视频链接为: link 动态时钟的效果基于HTML+css+js实现的动态时钟完整代码 <!DOCTYPE html> ...
按钮自动发光用html怎么弄,HTML+CSS+JS发光开关按钮
效果如图: index.html 纯CSS3实现发光开关切换按钮DEMO演示index2.html Switch Button #3 - CodePen style.css *, *:before, ...
如何使用html+css+js 实现动态新年烟花特效及服务器部署
前言不知不觉又到了年底,这一年是值得庆贺的一年,疫情过去,经济好转.我们急需在春节这个特殊的日志释放下自己的情绪.但是大部分地区都不让放炮,于是乎我为大家带来一套十分炫酷应景的春节烟花动画代码实现. ...
html+css+js涟漪效果按钮点击泛起涟漪
效果如果代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vscode——html+css+js+(jQuery)动态登陆界面
看b站大佬现场演示,菜鸟的我尽量写的,然后那个jQuery文件我用的b站大佬,不用文件实现不了动态效果图如下: 详细代码:动态登陆界面
HTML+CSS+JS实现 ❤️动态散花背景❤️
【首次送书福利】html+css+js制作动态千纸鹤
js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...

HTML+css+js萤火虫动态按钮

HTML+css+js萤火虫动态按钮（学习日志）

HTML+css+js萤火虫动态按钮相关推荐

最新文章

热门文章