feat 优惠卷与融合效果
parent
e695d422ac
commit
b61c149190
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -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>
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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);
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue