@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ @-webkit-keyframes dropIn-data-v-5098c7b4 { 0% { opacity: 0; -webkit-transform: translateY(-160px); transform: translateY(-160px); } 60% { opacity: 1; -webkit-transform: translateY(12px); transform: translateY(12px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes dropIn-data-v-5098c7b4 { 0% { opacity: 0; -webkit-transform: translateY(-160px); transform: translateY(-160px); } 60% { opacity: 1; -webkit-transform: translateY(12px); transform: translateY(12px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .treasure-box.dropIn.data-v-5098c7b4 { -webkit-animation: dropIn-data-v-5098c7b4 0.7s cubic-bezier(0.25, 0.85, 0.45, 1.25) forwards,pulse-data-v-5098c7b4 1s ease-in-out infinite 0.7s; animation: dropIn-data-v-5098c7b4 0.7s cubic-bezier(0.25, 0.85, 0.45, 1.25) forwards,pulse-data-v-5098c7b4 1s ease-in-out infinite 0.7s; } @-webkit-keyframes swing-data-v-5098c7b4 { 20% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 40% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 60% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 80% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing-data-v-5098c7b4 { 20% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 40% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 60% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 80% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .treasure-box.swing.data-v-5098c7b4 { -webkit-animation: swing-data-v-5098c7b4 0.4s ease-in-out infinite forwards; animation: swing-data-v-5098c7b4 0.4s ease-in-out infinite forwards; } /* 宝箱 */ .treasure-box.data-v-5098c7b4 { position: fixed; left: 100px; bottom: 80px; width: 192px; /* 128 × 1.5 */ height: 138px; /* 92 × 1.5 */ -webkit-animation: pulse-data-v-5098c7b4 0.4s ease-in-out infinite; animation: pulse-data-v-5098c7b4 0.4s ease-in-out infinite; display: flex; align-items: flex-end; } .openingGif.data-v-5098c7b4 { width: 192px; /* 128 × 1.5 */ height: 138px; /* 92 × 1.5 */ } .boxPng.data-v-5098c7b4 { width: 135px; height: 96px; margin-left: 20px; } .countdown.data-v-5098c7b4 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 20px; font-weight: bold; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* 动画 */ @-webkit-keyframes pulse-data-v-5098c7b4 { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } } @keyframes pulse-data-v-5098c7b4 { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } } /* 打开后停止 pulse */ .treasure-box.opening.data-v-5098c7b4 { -webkit-animation: none; animation: none; } /* 自动消失 */ .treasure-box.fadeOut.data-v-5098c7b4 { -webkit-animation: fadeOutUp-data-v-5098c7b4 .6s ease-out forwards; animation: fadeOutUp-data-v-5098c7b4 .6s ease-out forwards; } @-webkit-keyframes fadeOutUp-data-v-5098c7b4 { to { opacity: 0; -webkit-transform: translate(-50%, -40px); transform: translate(-50%, -40px); } } @keyframes fadeOutUp-data-v-5098c7b4 { to { opacity: 0; -webkit-transform: translate(-50%, -40px); transform: translate(-50%, -40px); } }