自定义大小的烟花燃放效果

代码语言: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