Skip to content

N
NodeJS_671036

Five-菜鸟级 / NodeJS_671036
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 2
Star 0
Fork 0
N
NodeJS_671036
提交 6827a3b2 编写于 作者: Q qq_41923622
浏览文件
操作

Wed Mar 26 21:15:00 CST 2025 inscode

上级 3f48a7fd
隐藏空白更改
内联 并排
Showing with 114 addition and 29 deletion
index.html
浏览文件 @ 6827a3b2
...@@ -33,7 +33,21 @@ ...@@ -33,7 +33,21 @@
</div> </div>
<div id="gift-card-animation-box"> <div id="gift-card-animation-box">
<div class="shuamozhihua"> <div class="shuamozhihua">
<div class="shuamozhihua-title">棘祥杏福 情定终身</div> <div class="shuamozhihua-title">
<div class="shuamozhihua-title-container" style="--n: 20">
<div class="shuamozhihua-title-ring">
<div class="shuamozhihua-title-item" style="--i: 0">棘</div>
<div class="shuamozhihua-title-item" style="--i: 1">祥</div>
<div class="shuamozhihua-title-item" style="--i: 2">杏</div>
<div class="shuamozhihua-title-item" style="--i: 3">福</div>
<div class="shuamozhihua-title-item" style="--i: 4"> </div>
<div class="shuamozhihua-title-item" style="--i: 5">情</div>
<div class="shuamozhihua-title-item" style="--i: 6">定</div>
<div class="shuamozhihua-title-item" style="--i: 7">终</div>
<div class="shuamozhihua-title-item" style="--i: 8">身</div>
</div>
</div>
</div>
<img class="shuamozhihua-img1" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205303857-804953175.png" /> <img class="shuamozhihua-img1" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205303857-804953175.png" />
<img class="shuamozhihua-img2" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205245772-817504696.png" /> <img class="shuamozhihua-img2" src="https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205245772-817504696.png" />
</div> </div>
...@@ -210,7 +224,7 @@ ...@@ -210,7 +224,7 @@
<div class="gift-list-avatar"><img :src="item.avatar"/></div> <div class="gift-list-avatar"><img :src="item.avatar"/></div>
<div class="gift-list-content"> <div class="gift-list-content">
<div class="gift-list-avatar-name"> <div class="gift-list-avatar-name">
<span>{{item.avatarName}}</span> 祝： <span>{{item.avatarName}}</span> 祝：
</div> </div>
<span> <span>
{{item.text}} {{item.text}}
......
src/style.scss
浏览文件 @ 6827a3b2
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
:root {
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
/* cyrillic-ext */ /* cyrillic-ext */
@font-face { @font-face {
font-family: 'Pacifico'; font-family: 'Pacifico';
...@@ -223,7 +225,7 @@ button:focus-visible { ...@@ -223,7 +225,7 @@ button:focus-visible {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
width: auto; width: auto;
max-width: 70vw; max-width: 85vw;
min-height: 20px; min-height: 20px;
text-align: left; text-align: left;
margin-top: 2px; margin-top: 2px;
...@@ -346,35 +348,104 @@ button:focus-visible { ...@@ -346,35 +348,104 @@ button:focus-visible {
// left: 50%; // left: 50%;
// top: 22vh; // top: 22vh;
bottom: -100px; bottom: -100px;
width: 100px; width: 96px;
height: auto; height: auto;
animation-duration: 2s; animation-duration: 2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} }
// .shuamozhihua-title {
// position: absolute;
// width: auto;
// height: auto;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// opacity: 0;
// // left: calc(50% - 160px);
// // top: 14vh;
// font-family: 'Sanjixinkai', 'Pacifico', 'cursive';
// font-size: 32px;
// background-color: rgba(255, 182, 193, 0.6);
// backdrop-filter: blur(6px);
// border: 3px solid transparent;
// padding: 10px 20px;
// border-radius: 50px;
// animation: rotate 5s linear infinite;
// backface-visibility: hidden;
// color: #e74210;
// text-shadow: 0 0 30px rgba(243, 221, 27, 0.836);
// }
.shuamozhihua-title { .shuamozhihua-title {
position: absolute; margin-top: 10vh;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: fadeIn 1s 3s forwards;
// left: calc(50% - 160px);
// top: 14vh;
font-family: 'Sanjixinkai', 'Pacifico', 'cursive'; font-family: 'Sanjixinkai', 'Pacifico', 'cursive';
font-size: 32px;
background-color: rgba(255, 182, 193, 0.6); display: flex;
backdrop-filter: blur(6px); justify-content: center;
border: 3px solid transparent; align-items: center;
padding: 10px 20px; line-height: 1.5;
border-radius: 50px; perspective: 40em;
animation: rotate 5s linear infinite;
backface-visibility: hidden;
color: #e74210; color: #e74210;
text-shadow: 0 0 30px rgba(243, 221, 27, 0.836); text-shadow: 0 0 30px rgba(243, 221, 27, 0.836);
.shuamozhihua-title-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
width: 100vw;
height: 30vh;
animation: tiltSpin 15s linear infinite;
transform-style: preserve-3d;
.shuamozhihua-title-ring {
position: relative;
height: 30vh;
width: 100vw;
font-size: 2em;
transform-style: preserve-3d;
animation-name: spin;
animation-duration: 10s;
animation-timing-function: inherit;
animation-iteration-count: inherit;
}
.shuamozhihua-title-ring:nth-child(even) {
animation-direction: reverse;
}
.shuamozhihua-title-item {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
// backdrop-filter: blur(2px);
font-weight: 600;
text-align: center;
transform: rotateY(calc(var(--i) * calc(360 / var(--n)) * 1deg)) translateZ(7rem);
}
}
@keyframes tiltSpin {
from {
transform: rotateY(0) rotateX(30deg);
}
to {
transform: rotateY(1turn) rotateX(30deg);
}
}
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(1turn);
}
}
} }
.shuamozhihua-img1 { .shuamozhihua-img1 {
...@@ -421,7 +492,7 @@ button:focus-visible { ...@@ -421,7 +492,7 @@ button:focus-visible {
40% { 40% {
bottom: 40%; bottom: 40%;
left: 55%; left: 65%;
transform: rotate(-30deg); transform: rotate(-30deg);
filter: blur(2px); filter: blur(2px);
} }
...@@ -434,7 +505,7 @@ button:focus-visible { ...@@ -434,7 +505,7 @@ button:focus-visible {
} }
80% { 80% {
bottom: 80%; bottom: 70%;
left: 45%; left: 45%;
transform: rotate(-15deg); transform: rotate(-15deg);
filter: blur(1px); filter: blur(1px);
...@@ -449,7 +520,7 @@ button:focus-visible { ...@@ -449,7 +520,7 @@ button:focus-visible {
100% { 100% {
bottom: 50%; bottom: 50%;
left: calc(50% - 120px); left: calc(50% - 100px);
transform: rotate(-15deg); transform: rotate(-15deg);
} }
} }
...@@ -473,7 +544,7 @@ button:focus-visible { ...@@ -473,7 +544,7 @@ button:focus-visible {
40% { 40% {
bottom: 40%; bottom: 40%;
right: 55%; right: 65%;
transform: rotate(30deg); transform: rotate(30deg);
filter: blur(2px); filter: blur(2px);
} }
...@@ -486,7 +557,7 @@ button:focus-visible { ...@@ -486,7 +557,7 @@ button:focus-visible {
} }
80% { 80% {
bottom: 80%; bottom: 70%;
right: 45%; right: 45%;
transform: rotate(15deg); transform: rotate(15deg);
filter: blur(1px); filter: blur(1px);
...@@ -501,7 +572,7 @@ button:focus-visible { ...@@ -501,7 +572,7 @@ button:focus-visible {
100% { 100% {
bottom: 50%; bottom: 50%;
right: calc(50% - 80px); right: calc(50% - 100px);
transform: rotate(15deg); transform: rotate(15deg);
} }
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或