tweakpane实现炫酷可调配置的粒子圆点动画效果代码

代码语言:html

所属分类:粒子

代码描述:tweakpane实现炫酷可调配置的粒子圆点动画效果代码,按h键显示参数面板,按r键随机效果。

代码标签: tweakpane 炫酷 可调 配置 粒子 圆点 动画

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

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

<head>
 
<meta charset="UTF-8">
 

 
<style>
@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

* {
 
margin: 0;
 
padding: 0;
 
box-sizing: border-box;
}

body
{
 
background: #000;
 
color: #f0f0f0;
 
font-family: "TheGoodMonolith", monospace;
 
display: flex;
 
flex-direction: column;
 
align-items: center;
 
justify-content: center;
 
min-height: 100vh;
 
padding: 20px;
}

#spiral {
 
width: 400px;
 
height: 400px;
 
margin: 40px 0;
}

.layout-container {
 
width: 80%;
 
max-width: 900px;
 
margin: 20px auto 60px;
 
border: 1px solid #fff;
}

.layout-header {
 
padding: 20px 30px;
 
border-bottom: 1px solid #fff;
 
height: 60px;
 
display: flex;
 
align-items: center;
}

.layout-title {
 
font-size: 24px;
 
font-weight: bold;
 
letter-spacing: 1px;
}

.layout-progress {
 
padding: 20px 30px;
 
border-bottom: 1px solid #fff;
 
font-size: 14px;
 
display: flex;
 
justify-content: space-between;
 
align-items: center;
}

.shortcut-info {
 
font-size: 12px;
 
opacity: 0.7;
}

.layout-services {
 
display: grid;
 
grid-template-columns: 1fr 1fr 1fr;
}

.service-item {
 
padding: 20px 30px;
 
border-right: 1px solid #fff;
 
border-bottom: 1px solid #fff;
 
display: flex;
 
flex-direction: column;
}

.service-item h3 {
 
margin-top: 0;
 
margin-bottom: 10px;
 
font-size: 14px;
}

.service-item p {
 
margin: 0;
 
font-size: 12px;
 
line-height: 1.4;
}

.service-item code {
 
background: rgba(255, 255, 255, 0.1);
 
padding: 2px 4px;
 
border-radius: 3px;
 
font-size: 10px;
}

.service-item:nth-child(3n) {
 
border-right: none;
}

.service-item:nth-last-child(-n + 3) {
 
border-bottom: none;
}

/* Code formatting */
pre
{
 
background: rgba(255, 255, 255, 0.1);
 
padding: 10px;
 
overflow-x: auto;
 
font-size: 10px;
 
margin: 10px 0;
}

/* Tweakpane container */
.tweakpane-container {
 
position: fixed;
 
top: 20px;
 
right: 20px;
 
transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
 
.layout-services {
   
grid-template-columns: 1fr 1fr;
 
}

 
.service-item:nth-child(3n) {
   
border-right: 1px solid #fff;
 
}

 
.service-item:nth-child(2n) {
   
border-right: none;
 
}

 
.service-item:nth-last-child(-n + 3) {
   
border-bottom: 1px solid #fff;
 
}

 
.service-item:nth-last-child(-n + 2) {
   
border-bottom: none;
 
}
}

@media (max-width: 480px) {
 
.layout-services {
   
grid-template-columns: 1fr;
 
}

 
.service-item {
   
border-right: none !important;
 
}

 
.service-item:not(:last-child) {
   
border-bottom: 1px solid #fff !important;
 
}
}
</style>


 
</head>

<body translate="no">
 
<div id="spiral"></div>

<div class="layout-container">
 
<div class="layout-header">
   
<div class="layout-title">GOLDEN SPIRAL METHOD</div>
 
</div>

  <div class="layout-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0