自定义大小的烟花燃放效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');
* {
font-family: 'Allerta Stencil', sans-serif;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
background: #111;
}
p {
position: fixed;
width: 100%;
text-align: center;
color: rgba(255,255,255,.15);
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 60px;
}
button {
background: #FF0000;
border: 0px;
border-radius: 4px;
color: #fff;
padding: 5px 15px;
margin-bottom: 5px;
cursor: pointer;
transition: .3s all;
outline: none;
box-shadow: 0px 0px 5px #ff0000;
}
button:hover {
background: #FF3030;
}
button:active {
transform: translate(-2px, 2px);
}
.option {
position: fixed;
left: 40px;
bottom: 40px;
}
label {
fonzt-size: 14px;
color: #fff;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 5px;
margin-top: 20px;
/* background:#00C5CD; */
background-image: linear-gradient(45deg ,#db0094, #0000ff, #ffff00, #ff0000, #d.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0