feat(electronic-wooden-fish): 实现电子木鱼页面及本地存储适配器

- 新增电子木鱼点击动画与计数功能
- 添加浮动提示动画效果
- 实现计数名称自定义输入框
- 增加重置所有数据按钮
- 创建跨平台本地存储适配器(支持浏览器和Chrome扩展)
- 样式优化:按钮增加过渡动画和按下效果
- 页面结构重构,分离CSS样式文件
This commit is contained in:
雨霖铃
2025-12-20 11:43:35 +08:00
parent d7740a3d4f
commit 6dc71bf056
4 changed files with 197 additions and 22 deletions
+64
View File
@@ -0,0 +1,64 @@
.dzmy-bg {
background-color: black;
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: relative;
}
.dzmy-count {
position: absolute;
top: 10px;
left: 10px;
color: #ffffff;
}
.dzmy-img {
width: 160px;
height: 120px;
cursor: pointer;
transition: transform 0.12s ease;
transform: scale(1);
}
.dzmy-img.active {
transform: scale(0.92);
}
.dzmy-box {
text-align: center;
position: relative;
}
.tips {
position: absolute;
top: -50px;
width: 100%;
text-align: center;
pointer-events: none;
}
.tip-item {
position: absolute;
width: 100%;
animation: floatUp 0.5s ease-out forwards;
color: #fadb14;
font-weight: bold;
}
@keyframes floatUp {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0;
}
}
.dzmy-controls {
margin-bottom: 10px;
}