feat 优惠卷与融合效果

12 months ago · b61c149190
parent e695d422ac
commit b61c149190
7 changed files with 160 additions and 1 deletions
--- a/20230816-通用/imgs/bg.jpg
+++ b/20230816-通用/imgs/bg.jpg
--- 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;
--- a/20230906-优惠劵效果/1.webp
+++ b/20230906-优惠劵效果/1.webp
--- a/20230906-优惠劵效果/实验.html
+++ b/20230906-优惠劵效果/实验.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    html {
+      padding: 0;
+      margin: 0;
+    }
+    body {
+      min-height: 100%;
+      padding: 5vmin;
+      margin: 0;
+      background-image: linear-gradient(45deg, #F003,#0F03,#00F3);
+      background-size: 10vw 10vh;
+    }
+  </style>
+</head>
+<body>
+  <style type="text/css">
+  .coupon {
+    width: 240px;
+    height: 100px;
+    margin-top: 15px;
+    background-color: #F00;
+    -webkit-mask-image: radial-gradient(circle at left center, transparent 5px, red 6px); 
+    mask-image: radial-gradient(circle at left center, transparent 5px, red 6px); 
+    -webkit-mask-size: 100% 20px;
+    mask-size: 100% 20px;
+    -webkit-mask-position: left;
+    mask-position: left;
+    -webkit-mask-repeat: repeat-y;
+    mask-repeat: repeat-y;
+    box-shadow: 0 0 10px #000;
+  
+  }
+  </style>
+  <div class="coupon"></div>
+</body>
+</html>
--- a/融合特效/index.css
+++ 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);
+  }
+}
--- a/融合特效/index.html
+++ b/融合特效/index.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="index.css">
+  <script type="module" src="index.js"></script>
+</head>
+
+<body>
+  <div class="blend">
+    <div>
+      <div></div>
+    </div>
+    <svg style="display: none;">
+      <defs>
+        <filter id="blend">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
+          <fecolorMatrix in="blur" mode="matrix" values="
+            1 0 0 0 0
+            0 1 0 0 0
+            0 0 1 0 0
+            0 0 0 20 -10">
+          </fecolorMatrix>
+        </filter>
+      </defs>
+    </svg>
+  </div>
+</body>
+
+</html>
--- a/融合特效/index.js
+++ 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);
+  
+}