blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-06 03:57:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

ci(style): 🎡 新增 entry.css

Browse Source 
新增 entry.css 样式文件，为替换 unocss 做准备
This commit is contained in:
xiangshu233 2024-02-14 21:55:06 +08:00
parent 5fddbdda2f
commit 031c7b20e5
2 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/styles/entry.css Normal file
View File

@ -0,0 +1,168 @@
* > .enter-x:nth-child(1) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(1) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(1),
* > .-enter-x:nth-child(1) {
z-index: 9;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
* > .enter-x:nth-child(2) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(2) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(2),
* > .-enter-x:nth-child(2) {
z-index: 8;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
}
* > .enter-x:nth-child(3) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(3) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(3),
* > .-enter-x:nth-child(3) {
z-index: 7;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
* > .enter-x:nth-child(4) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(4) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(4),
* > .-enter-x:nth-child(4) {
z-index: 6;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
* > .enter-x:nth-child(5) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(5) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(5),
* > .-enter-x:nth-child(5) {
z-index: 5;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
* > .enter-y:nth-child(1) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(1) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(1),
* > .-enter-y:nth-child(1) {
z-index: 9;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
* > .enter-y:nth-child(2) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(2) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(2),
* > .-enter-y:nth-child(2) {
z-index: 8;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
}
* > .enter-y:nth-child(3) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(3) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(3),
* > .-enter-y:nth-child(3) {
z-index: 7;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
* > .enter-y:nth-child(4) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(4) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(4),
* > .-enter-y:nth-child(4) {
z-index: 6;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
* > .enter-y:nth-child(5) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(5) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(5),
* > .-enter-y:nth-child(5) {
z-index: 5;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
@keyframes enter-x-animation {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes enter-y-animation {
to {
opacity: 1;
transform: translateY(0);
}
}

1
src/styles/index.less
View File

@ -1,3 +1,4 @@
@import './common.less';
@import 'transition/index.less';
@import 'entry.css';
@import './vant.less';