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

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

代码语言：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(){
 .........完整代码请登录后点击上方下载按钮下载查看