yoshi实现12种不同的粒子动画效果集合代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：yoshi实现12种不同的粒子动画效果代码，包括星星、泡泡、下雨、下雪、曲线、多彩线条等12种可调参数的粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/yoshi.css">

    <style>
        @charset "utf-8";
    /******************************************************************************
      STYLES USED IN THE DEMO ONLY
    ******************************************************************************/
    html, body { 
    	min-height: 100%; 
    	margin:0; 
    	padding:0; }
    
    body {
    	font-family:"Open Sans",sans-serif;
    	background:#ffdb43;
    	color:#000;
    }
    
    pre, code {
    	color:#000;    
    	font-family: monospace;
    	font-size:18px;
    }
    
    .container {
    	margin:0 auto;		
    }
    
    h1 {
    	font-size:62px;
    	color:#000;
    	font-family: 'Raleway', sans-serif;
    	font-weight:400;
    }
    h1 span {font-size:32px; }
    
    p {
    	font-size:25px;
    	line-height:46px;
    	font-weight:100;
    	color:#000;
    }
    
    p.example {
    	padding:0;
    	margin:0;
    	font-size:20px;
    	line-height:32px;
    	font-weight:100;
    	color:#000;	
    }
    
    h2 {
    	display:inline-block;
    	background:#000;
    	font-size:26px;
    	font-weight:400;
    	line-height:46px;
    	color:#ffdb43;
    	padding:2px 35px 2px 10px;	
    	margin-top:45px;
    	margin-bottom:15px;
    	width:auto; }
    
    ul li {
    	font-size:25px;
    	line-height:46px;
    	font-weight:100;
    	color:#000;
    }
    
    .setting {
    	font-weight:400;
    	display:inline-block;
    	width:170px;
    }
    
    
    input {
    	width:100px;
    	hieght:30px;
    	padding:8px;
    	font-size:16px; 
    	background:#f2f2f2;
    	border:1px solid #000;
    	color:#333;	
    	margin-right:10px;
    	margin-bottom:10px; }
    	
    label {
    	font-size:16px;
    	height:30px;
    	margin-right:10px;
    	-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;
    }
    
    .left {
    	width:50%;
    	float:left;
    }
    
    button {
    	width:100%;
    	padding:20px 0;
    	text-align:center;
    	font-size:28px;
    	cursor:pointer;
    	color:#000;
    	text-transform:uppercase;
    	margin-top:10px;
    	font-family:'Open Sans',sans-serif;
    	background:#ffdb43;
    	border:6px double #000;
    	letter-spacing:2px;
    	transition:all 500ms ease; }
    
    button:hover {
    	background:#000;
    	color:#ffdb43;
    	letter-spacing:1px;	
    	border-color:#ffdb43;	
    }
    
    .preset {
    	display:inline-block;
    	width:95px;
    	padding:10px 0;
    	text-align:center;
    	font-size:12px;
    	cursor:pointer;
    	color:#000;
    	text-transform:uppercase;
    	margin-top:10px;
    	font-family:'Open Sans',sans-serif;
    	background:#ffdb43;
    	border:6px double #000;
    	letter-spacing:1px;
    	transition:all 500ms ease; }
    	
    .preset:hover {
    	background:#000;
    	color:#ffdb43;
    	border-color:#ffdb43; }
    
    
    .yoshi_full_screen {
    	position:fixed;
    	z-index:-1;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	width:100%;
    	height:100%; }
    
    .yoshi_full_screen .Yoshi_particleEffects {
    	width:100%;
    	height:100%; }
    
    
    
    /* IPHONE */
    @media (max-width:375px){
    	.container {
    		width:375px;
    		padding-top:500px;
    	}	
    }
    
    /* IPAD */
    @media (max-width:768px){
    	.container {
    		width:500px;
    		padding-top:250px;
    	}	
    	
    	.setting {display:block;}
    }
    
    
    /* DESKTOP */
    @media (min-width:768px){
    	.container {
    		width:768px;
    		padding-top:200px;
    	}	
    }
    
    /* DESKTOP + */
    @media (min-width:1024px){
    	.container {
    		width:1000px;
    		padding-top:100px; }	
    }
    </style>

    <!-- LOAD JQUERY -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/yoshi.js"></script>
    <script>
        /*********************************************************************************************/
    // THIS IS CODE FOR THE GENERATOR/DEMO ONLY
    /*********************************************************************************************/	
    $(document).ready(function(){
    	full_screen=false;
    	
    	$('#update').on('click',function(){
    		// NEEDED TO PREVENT ANIMATION BUILDUP WHEN GENERATING
    		window.cancelAnimationFrame(yoshiID);		
    		
    		// GET PARTICLE SETTINGS
    		var numParticles=parseFloat($('#par1').val()),
    			dist=parseFloat($('#par2').val()),
    			psize=parseFloat($('#par3').val()),
    			maxsize=parseFloat($('#par4').val()),
    			pcolor='#'+$('#par5').val().replace('#','').removeWS(),
    			switchcolor=$('#par5a').val().toLowerCase().removeWS(),
    			pshape=$('#par6').val().removeWS().toLowerCase(),
    			pw=parseFloat($('#par7').val()),
    			mpw=parseFloat($('#par8').val()),
    			ph=parseFloat($('#par9').val()),
    			mph=parseFloat($('#par10').val()),
    			bgc=$('#gen1').val().replace('#','').removeWS().toLowerCase(),
    			xspeed=isNaN($('#gen2')) ? 'r' : parseFloat($('#gen2').val()),
    			xmaxspeed=parseFloat($('#gen2a').val()),
    			yspeed=isNaN($('#gen3')) ? 'r' : parseFloat($('#gen3').val()),
    			ymaxspeed=parseFloat($('#gen3a').val()),
    			xvel=parseFloat($('#gen4').val()),
    			yvel=parseFloat($('#gen5').val()),
    			xtype=parseFloat($('#gen6').val()),
    			ytype=parseFloat($('#gen7').val()),
    			xacc=parseFloat($('#gen8').val()),
    			yacc=parseFloat($('#gen9').val()),
    			draw=$('#line1').val().toLowerCase().removeWS(),
    			lcolor='#'+$('#line2').val().replace('#','').removeWS(),
    			lw=parseFloat($('#line3').val()),
    			ltype=$('#line4').val().removeWS().toLowerCase(),
    			ctax=$('#line5').val(),
    			ctay=$('#line6').val(),
    			ctbx=$('#line7').val(),
    			ctby=$('#line5').val();
    			
    		// VALIDATE FIELDS BEFORE CONTINUING
    		if(typeof numParticles === 'undefined' || numParticles > 300 || isNaN(numParticles)){ alert("Number of Particles is too large or undefined"); return false; };
    		if(typeof dist === 'undefined' || isNaN(dist)){ alert("Minimum Distance is undefined"); return false; };
    		if(typeof psize === 'undefined' || isNaN(psize)){ alert("Particle Size is undefined"); return false; };
    		if(typeof maxsize === 'undefined' || isNaN(maxsize)){ alert("Maximum Particle Size is undefined"); return false; };
    		if(typeof pcolor === 'undefined'){ alert("Particle Color is undefined"); return false; };
    		if(typeof switchcolor === 'undefined' || switchcolor!=='true' && switchcolor!=='false'){ alert("Switch Color is undefined"); return false; };
    		if(typeof pshape === 'undefined' || pshape!=='circle' && pshape!=='line' && pshape!=='triangle'){ 
    			alert("Particle Shape is undefined or inco.........完整代码请登录后点击上方下载按钮下载查看