diff --git a/20230816-通用/imgs/bg.jpg b/20230816-通用/imgs/bg.jpg
new file mode 100644
index 0000000..a08588d
Binary files /dev/null and b/20230816-通用/imgs/bg.jpg differ
diff --git a/20230816-通用/index.html b/20230816-通用/index.html
index 6ce07cf..0a9af8c 100644
--- a/20230816-通用/index.html
+++ b/20230816-通用/index.html
@@ -58,7 +58,12 @@
font-size: var(--size);
width: 100vw;
height: 100vh;
- background-image: linear-gradient(120deg, var(--bg1), var(--bg2));
+ /* background-image: linear-gradient(120deg, var(--bg1), var(--bg2)); */
+ background-image: url(imgs/bg.jpg);
+ backdrop-filter: blur(2px);
+ background-position: center center;
+ background-size: cover;
+
position: fixed;
left: 0;
top: 0;
diff --git a/20230906-优惠劵效果/1.webp b/20230906-优惠劵效果/1.webp
new file mode 100644
index 0000000..bf73f93
Binary files /dev/null and b/20230906-优惠劵效果/1.webp differ
diff --git a/20230906-优惠劵效果/实验.html b/20230906-优惠劵效果/实验.html
new file mode 100644
index 0000000..b142f0d
--- /dev/null
+++ b/20230906-优惠劵效果/实验.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/融合特效/index.css b/融合特效/index.css
new file mode 100644
index 0000000..6e11771
--- /dev/null
+++ b/融合特效/index.css
@@ -0,0 +1,48 @@
+html,body {
+ margin: 0;
+ padding: 0;
+}
+.blend {
+ position: relative;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ --bg: red;
+
+ &>div {
+ background-color: var(--bg);
+ width: 100%;
+ height: 50%;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ filter: url(#blend);
+
+ &>div {
+ position: absolute;
+ --x:0;
+ -- : 50px;
+ --time: 2s;
+ --to: -100px;
+ border-radius: 50%;
+ width: var(--size);
+ height: var(--size);
+ left: var(--x);
+ background-color: var(--bg);
+ top:0;
+ animation: am-blend var(--time) ease-in forwards;
+ }
+ }
+
+}
+
+
+@keyframes am-blend {
+ 75% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0);
+ top: var(--to);
+ }
+}
diff --git a/融合特效/index.html b/融合特效/index.html
new file mode 100644
index 0000000..d2b93d9
--- /dev/null
+++ b/融合特效/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/融合特效/index.js b/融合特效/index.js
new file mode 100644
index 0000000..92966e9
--- /dev/null
+++ b/融合特效/index.js
@@ -0,0 +1,31 @@
+const max = 20;
+
+const random = (min,max)=>{
+ return Math.random()*(max-min)+min;
+}
+
+const blendPlay = (root) => {
+ root.addEventListener('animationend', (e) => {
+ e.target.remove();
+
+ });
+
+ for (let i = 0; i < max; i++){
+ const bubble = document.createElement('div');
+ bubble.style.setProperty('--x',random(0,100)+'%');
+ bubble.style.setProperty('--size',random(1,10)+'em');
+ bubble.style.setProperty('--time',random(2,5)+'s');
+ bubble.style.setProperty('--to',-random(10,50)+'%');
+ root.appendChild(bubble);
+ }
+
+}
+
+window.onload = () => {
+ const root = document.querySelector('.blend').firstElementChild;
+ blendPlay(root);
+ setInterval(() => {
+ blendPlay(root);
+ }, 1000);
+
+}
\ No newline at end of file