refactor: 首页提取样式至单独的文件
This commit is contained in:
LOG1997
341
src/views/Home/index.scss
Normal file
341
src/views/Home/index.scss
Normal file
@@ -0,0 +1,341 @@
|
||||
#menu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
bottom: 50px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
}
|
||||
|
||||
.start {
|
||||
// 居中
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 13rem;
|
||||
overflow: hidden;
|
||||
height: 3rem;
|
||||
background-size: 300% 300%;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
transition: 0.5s;
|
||||
animation: gradient_301 5s ease infinite;
|
||||
border: double 4px transparent;
|
||||
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
-webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
|
||||
animation: pulsate-fwd 1.2s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 13rem;
|
||||
overflow: hidden;
|
||||
height: 3rem;
|
||||
background-size: 300% 300%;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
transition: 0.5s;
|
||||
animation: gradient_301 5s ease infinite;
|
||||
border: double 4px transparent;
|
||||
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
}
|
||||
|
||||
#container-stars {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: 0.5s;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
z-index: 2;
|
||||
font-family: 'Avalors Personal Use';
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 4px white;
|
||||
}
|
||||
|
||||
#glow {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
filter: blur(2rem);
|
||||
animation: pulse_3011 4s infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.circle:nth-of-type(1) {
|
||||
background: rgba(254, 83, 186, 0.636);
|
||||
}
|
||||
|
||||
.circle:nth-of-type(2) {
|
||||
background: rgba(142, 81, 234, 0.704);
|
||||
}
|
||||
|
||||
.btn-start:hover #container-stars {
|
||||
z-index: 1;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.btn-start:hover {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.btn-start:active {
|
||||
border: double 4px #FE53BB;
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn-start:active .circle {
|
||||
background: #FE53BB;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
width: 200rem;
|
||||
height: 200rem;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10rem;
|
||||
left: -100rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: animStarRotate 90s linear infinite;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
width: 170%;
|
||||
height: 500%;
|
||||
animation: animStar 60s linear infinite;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-135rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animStarRotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient_301 {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse_3011 {
|
||||
0% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-end {
|
||||
-webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||
animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-end {
|
||||
--glow-color: rgb(217, 176, 255);
|
||||
--glow-spread-color: rgba(191, 123, 255, 0.781);
|
||||
--enhanced-glow-color: rgb(231, 206, 255);
|
||||
--btn-color: rgb(100, 61, 136);
|
||||
border: .25em solid var(--glow-color);
|
||||
padding: 1em 3em;
|
||||
color: var(--glow-color);
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
background-color: var(--btn-color);
|
||||
border-radius: 1em;
|
||||
outline: none;
|
||||
box-shadow: 0 0 1em .25em var(--glow-color),
|
||||
0 0 4em 1em var(--glow-spread-color),
|
||||
inset 0 0 .75em .25em var(--glow-color);
|
||||
text-shadow: 0 0 .5em var(--glow-color);
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||
}
|
||||
|
||||
.btn-end::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--glow-spread-color);
|
||||
filter: blur(2em);
|
||||
opacity: .7;
|
||||
transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
|
||||
}
|
||||
|
||||
.btn-end:hover {
|
||||
color: var(--btn-color);
|
||||
background-color: var(--glow-color);
|
||||
box-shadow: 0 0 1em .25em var(--glow-color),
|
||||
0 0 4em 2em var(--glow-spread-color),
|
||||
inset 0 0 .75em .25em var(--glow-color);
|
||||
}
|
||||
|
||||
.btn-end:active {
|
||||
box-shadow: 0 0 0.6em .25em var(--glow-color),
|
||||
0 0 2.5em 2em var(--glow-spread-color),
|
||||
inset 0 0 .5em .25em var(--glow-color);
|
||||
}
|
||||
|
||||
// 按钮动画
|
||||
@-webkit-keyframes pulsate-fwd {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate-fwd {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes tracking-in-expand-fwd {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
-webkit-transform: translateZ(-700px);
|
||||
transform: translateZ(-700px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tracking-in-expand-fwd {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
-webkit-transform: translateZ(-700px);
|
||||
transform: translateZ(-700px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -119,29 +119,33 @@ function init() {
|
||||
const number = document.createElement('div')
|
||||
number.className = 'card-id'
|
||||
number.textContent = tableData.value[i].uid
|
||||
if(isShowAvatar.value) number.style.display = 'none'
|
||||
if (isShowAvatar.value)
|
||||
number.style.display = 'none'
|
||||
element.appendChild(number)
|
||||
|
||||
const symbol = document.createElement('div')
|
||||
symbol.className = 'card-name'
|
||||
symbol.textContent = tableData.value[i].name
|
||||
if(isShowAvatar.value) symbol.className = 'card-name card-avatar-name'
|
||||
if (isShowAvatar.value)
|
||||
symbol.className = 'card-name card-avatar-name'
|
||||
element.appendChild(symbol)
|
||||
|
||||
const detail = document.createElement('div')
|
||||
detail.className = 'card-detail'
|
||||
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
|
||||
if(isShowAvatar.value) detail.style.display = 'none'
|
||||
if (isShowAvatar.value)
|
||||
detail.style.display = 'none'
|
||||
element.appendChild(detail)
|
||||
|
||||
const avatar = document.createElement('img');
|
||||
avatar.className = 'card-avatar';
|
||||
avatar.src = tableData.value[i].avatar;
|
||||
avatar.alt = 'avatar';
|
||||
avatar.style.width = '140px';
|
||||
avatar.style.height = '140px';
|
||||
if(!isShowAvatar.value) avatar.style.display = 'none'
|
||||
element.appendChild(avatar);
|
||||
const avatar = document.createElement('img')
|
||||
avatar.className = 'card-avatar'
|
||||
avatar.src = tableData.value[i].avatar
|
||||
avatar.alt = 'avatar'
|
||||
avatar.style.width = '140px'
|
||||
avatar.style.height = '140px'
|
||||
if (!isShowAvatar.value)
|
||||
avatar.style.display = 'none'
|
||||
element.appendChild(avatar)
|
||||
|
||||
element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
|
||||
const object = new CSS3DObject(element)
|
||||
@@ -783,345 +787,5 @@ onUnmounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#menu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
bottom: 50px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
}
|
||||
|
||||
.start {
|
||||
// 居中
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 13rem;
|
||||
overflow: hidden;
|
||||
height: 3rem;
|
||||
background-size: 300% 300%;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
transition: 0.5s;
|
||||
animation: gradient_301 5s ease infinite;
|
||||
border: double 4px transparent;
|
||||
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
-webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
|
||||
animation: pulsate-fwd 1.2s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 13rem;
|
||||
overflow: hidden;
|
||||
height: 3rem;
|
||||
background-size: 300% 300%;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
transition: 0.5s;
|
||||
animation: gradient_301 5s ease infinite;
|
||||
border: double 4px transparent;
|
||||
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
}
|
||||
|
||||
#container-stars {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: 0.5s;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
z-index: 2;
|
||||
font-family: 'Avalors Personal Use';
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 4px white;
|
||||
}
|
||||
|
||||
#glow {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
filter: blur(2rem);
|
||||
animation: pulse_3011 4s infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.circle:nth-of-type(1) {
|
||||
background: rgba(254, 83, 186, 0.636);
|
||||
}
|
||||
|
||||
.circle:nth-of-type(2) {
|
||||
background: rgba(142, 81, 234, 0.704);
|
||||
}
|
||||
|
||||
.btn-start:hover #container-stars {
|
||||
z-index: 1;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.btn-start:hover {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.btn-start:active {
|
||||
border: double 4px #FE53BB;
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn-start:active .circle {
|
||||
background: #FE53BB;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
width: 200rem;
|
||||
height: 200rem;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10rem;
|
||||
left: -100rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: animStarRotate 90s linear infinite;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
width: 170%;
|
||||
height: 500%;
|
||||
animation: animStar 60s linear infinite;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-135rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animStarRotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient_301 {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse_3011 {
|
||||
0% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-end {
|
||||
-webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||
animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-end {
|
||||
--glow-color: rgb(217, 176, 255);
|
||||
--glow-spread-color: rgba(191, 123, 255, 0.781);
|
||||
--enhanced-glow-color: rgb(231, 206, 255);
|
||||
--btn-color: rgb(100, 61, 136);
|
||||
border: .25em solid var(--glow-color);
|
||||
padding: 1em 3em;
|
||||
color: var(--glow-color);
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
background-color: var(--btn-color);
|
||||
border-radius: 1em;
|
||||
outline: none;
|
||||
box-shadow: 0 0 1em .25em var(--glow-color),
|
||||
0 0 4em 1em var(--glow-spread-color),
|
||||
inset 0 0 .75em .25em var(--glow-color);
|
||||
text-shadow: 0 0 .5em var(--glow-color);
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||
}
|
||||
|
||||
.btn-end::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--glow-spread-color);
|
||||
filter: blur(2em);
|
||||
opacity: .7;
|
||||
transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
|
||||
}
|
||||
|
||||
.btn-end:hover {
|
||||
color: var(--btn-color);
|
||||
background-color: var(--glow-color);
|
||||
box-shadow: 0 0 1em .25em var(--glow-color),
|
||||
0 0 4em 2em var(--glow-spread-color),
|
||||
inset 0 0 .75em .25em var(--glow-color);
|
||||
}
|
||||
|
||||
.btn-end:active {
|
||||
box-shadow: 0 0 0.6em .25em var(--glow-color),
|
||||
0 0 2.5em 2em var(--glow-spread-color),
|
||||
inset 0 0 .5em .25em var(--glow-color);
|
||||
}
|
||||
|
||||
// 按钮动画
|
||||
@-webkit-keyframes pulsate-fwd {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate-fwd {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes tracking-in-expand-fwd {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
-webkit-transform: translateZ(-700px);
|
||||
transform: translateZ(-700px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tracking-in-expand-fwd {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
-webkit-transform: translateZ(-700px);
|
||||
transform: translateZ(-700px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user