html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码
效果图
各位长友大家上午好!
今天给大家带来的是 css3 按钮粒子烟花特效源码!
大家可以按照自己的意愿进行修改!
有想要文件版源码的可以 在我以往的文章里找到我的联系
好了,废话不多说,上源码!
body {
margin: 0;
overflow: hidden;
#myCanvas {
display: block;
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 1.5em;
text-transform: uppercase;
padding: 7px 20px;
left: 50%;
width: 200px;
margin-left: -100px;
top: 50%;
border-radius: 10px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: hsla(260, 100%, 50%, 1);
cursor: pointer;
animation: pulse 1s infinite alternate;
transition: background 0.4s, border 0.2s, margin 0.2s;
#button:hover {
background: hsla(220, 100%, 60%, 1);
margin-top: -1px;
animation: none;
#button:active {
border-bottom-width: 0;
margin-top: 5px;
@keyframes pulse {
0% {
margin-top: 0px;
100% {
margin-top: 6px;
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Math.randMinMax = function(min, max, round) {
var val = min + (Math.random() * (max - min));
if( round ) val = Math.round( val );
return val;
};
Math.TO_RAD = Math.PI/180;
Math.getAngle = function( x1, y1, x2, y2 ) {
vardx = x1 - x2,
dy = y1 - y2;
return Math.atan2(dy,dx);
};
Math.getDistance = function( x1, y1, x2, y2 ) {
var xs = x2 - x1,
ys = y2 - y1;
xs *= xs;
ys *= ys;
return Math.sqrt( xs + ys );
};
var FX = {};
(function() {
varcanvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
lastUpdate = new Date(),
mouseUpdate = new Date(),
lastMouse = [],
width, height;
FX.particles = [];
setFullscreen();
document.getElementById('button').addEventListener('mousedown', buttonEffect);
function buttonEffect() {
var button = document.getElementById('button'),
height = button.offsetHeight,
left = button.offsetLeft,
top = button.offsetTop,
width = button.offsetWidth,
x, y, degree;
for(var i=0;i<40;i=i+1) {
if( Math.random() < 0.5 ) {
y = Math.randMinMax(top, top+height);
if( Math.random() < 0.5 ) {
x = left;
degree = Math.randMinMax(-45,45);
} else {
x = left + width;
degree = Math.randMinMax(135,225);
} else {
x = Math.randMinMax(left, left+width);
if( Math.random() < 0.5 ) {
y = top;
degree = Math.randMinMax(45,135);
} else {
y = top + height;
degree = Math.randMinMax(-135, -45);
createParticle({
x: x,
y: y,
degree: degree,
speed: Math.randMinMax(100, 150),
vs: Math.randMinMax(-4,-1)
});
window.setTimeout(buttonEffect, 100);
loop();
window.addEventListener('resize', setFullscreen );
function createParticle( args ) {
var options = {
x: width/2,
y: height/2,
color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')',
degree: Math.randMinMax(0, 360),
speed: Math.randMinMax(300, 350),
vd: Math.randMinMax(-90,90),
vs: Math.randMinMax(-8,-5)
};
for (key in args) {
options[key] = args[key];
FX.particles.push( options );
function loop() {
var thisUpdate = new Date(),
delta = (lastUpdate - thisUpdate) / 1000,
amount = FX.particles.length,
size = 2,
i = 0,
p;
ctx.fillStyle = 'rgba(15,15,15,0.25)';
ctx.fillRect(0,0,width,height);
ctx.globalCompositeStyle = 'lighter';
for(;i
p = FX.particles[ i ];
p.degree += (p.vd * delta);
p.speed += (p.vs);// * delta);
if( p.speed < 0 ) continue;
p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);
ctx.save();
ctx.translate( p.x, p.y );
ctx.rotate( p.degree * Math.TO_RAD );
ctx.fillStyle = p.color;
ctx.fillRect( -size, -size, size*2, size*2 );
ctx.restore();
lastUpdate = thisUpdate;
requestAnimFrame( loop );
function setFullscreen() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
};
})();
html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码相关推荐
- css3 烟 蚊香_HTML5前端特效库 css3 按钮粒子烟花特效源码
效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 需要文档版本源码,可以加我的HTML5前端交流群111645711 好了,废话不多 ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...
- java计算机毕业设计HTML5企业员工管理系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计HTML5企业员工管理系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5企业员工管理系统MyBatis+系统+LW文档+源码+调试部署 本源码技 ...
- java计算机毕业设计HTML5果蔬经营平台MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计HTML5果蔬经营平台MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5果蔬经营平台MyBatis+系统+LW文档+源码+调试部署 本源码技术栈: ...
- 计算机毕业设计ssm基于HTML5的流浪动物领养平台yww0b系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于HTML5的流浪动物领养平台yww0b系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于HTML5的流浪动物领养平台yww0b系统+程序+源码+lw+远程部署 本源码技 ...
- 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 本源码技术栈: ...
- 【C++标准库】std::string用法指南源码剖析
文章目录 1.ASCII码 (1)计算机如何表达字符 2.C 语言中的字符类型 char (1)思想:char 即整数 (3)C 语言帮手函数 (4)C语言中的字符串 (4)C 语言转义符 3.C++ ...
- 织梦自适应php源码,HTML5自适应仿WP大学织梦整站源码 v1.0
HTML5自适应仿WP大学织梦整站源码简介 HTML5自适应仿WP大学织梦整站源码v1.0是一个自适应手机端和PC端的最新版织梦V5.7为内核的网站模板,软件兼容主流浏览器,模板包含安装说明,并包含测 ...
最新文章
- 6 OC中 isa 和 superclass 的总结
- 项目实施中应该注意的事项
- 在Flex3中使用Runtime Shared Library (RSL)
- 《京东技术解密》——海量订单处理
- Qt串口通信类Posix_QextserialPort中flush()函数修正
- 【程序员必看】如何用Python从0开始创建一个区块链?
- python os模块system_python 中 os.system 的本质 | 编程知识2
- CGAL window 10安装、Demo使用步骤以及问题解决记录
- java获取access token_微信java 开发4 access_token获取
- Swift中的willSet与didSet
- 此计算机中未配置默认浏览器,飞火浏览器设置默认浏览器失败了怎么办-飞火浏览器设置默认浏览器的方法 - 河东软件园...
- Shell 中常用的if 语句总结
- 逻辑回归算法实战之信用卡欺诈检测
- 微信小程序-wxs实现时间格式化过滤器(正则)
- 红米K40使用半个月,谈谈上手体验,“优缺点”非常明显!
- MySQL查询以逗号隔开的字符串
- STM32CubeMx移植DSP库 傅立叶变化(FFT)测试
- RV-LINK:GDB 使用 RV-LINK 仿真器调试 RISC-V 程序
- 唐读笔记-正则表达式必知必会
- 【NOIP普及组】 1945:【09NOIP普及组】多项式输出
热门文章
- 奇虎360安全卫士推出木马程序查杀功能
- 使用原装win11安装盘绕过TPM2.0给老微机安装原汁原味的win11
- 2022年计算机软件水平考试多媒体应用设计师(中级)练习题及答案
- Docker Swarm nginx 集群搭建
- C028: Unable to Connect to the Siebel Gateway Name Server
- 下载STM32CubeMX软件固件库包的方法
- lavaral中文手册_Laravel-mix 中文文档
- AHCI协议阅读笔记
- FMEA软件-FMEA的价值与局限性
- mysql handlersocket_HandlerSocket