feat(electronic-wooden-fish): 实现电子木鱼页面及本地存储适配器
- 新增电子木鱼点击动画与计数功能 - 添加浮动提示动画效果 - 实现计数名称自定义输入框 - 增加重置所有数据按钮 - 创建跨平台本地存储适配器(支持浏览器和Chrome扩展) - 样式优化:按钮增加过渡动画和按下效果 - 页面结构重构,分离CSS样式文件
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user