Merge pull request #14 from yuki540net/feature/top-page
Feature/top page
This commit is contained in:
yuki540
GitHub
commit
23198ef53d
BIN
public/images/top-page/gab.png
Normal file
BIN
public/images/top-page/gab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
public/images/top-page/logo.png
Normal file
BIN
public/images/top-page/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -332,6 +332,58 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<!--********************************** top-page ***************************************-->
|
||||
<section class="top-page">
|
||||
<section class="top-page__ring">
|
||||
<div class="wrap">
|
||||
<div class="inner">
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="top-page__main-illust"></section>
|
||||
<section class="top-page__frame">
|
||||
<section><div></div><div></div><div></div></section>
|
||||
<section><div></div><div></div><div></div></section>
|
||||
<section><div></div><div></div><div></div></section>
|
||||
<section><div></div><div></div><div></div></section>
|
||||
</section>
|
||||
<section class="top-page__logo">
|
||||
<img src="./images/top-page/logo.png" alt="ロゴ" />
|
||||
</section>
|
||||
<section class="top-page__global-nav">
|
||||
<nav class="nav-box">
|
||||
<section>
|
||||
<a data-color="pink" href="#">私について</a>
|
||||
<a data-color="light-pink" href="#">思い出</a>
|
||||
</section>
|
||||
<section>
|
||||
<a data-color="light-purple" href="#">このサイトの歴史</a>
|
||||
<a data-color="purple" href="#">作ったもの</a>
|
||||
</section>
|
||||
</nav>
|
||||
<div class="message"><h3>ようこそ、魔法少女サイトへ</h3></div>
|
||||
</section>
|
||||
<section class="top-page__sns">
|
||||
<a title="Twitter" href="https://twitter.com/eriri_jp" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a title="GitHub" href="https://github.com/yuki540net" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a title="はてなブログ" href="https://yuki540.hatenablog.jp/archive" target="_blank">
|
||||
<i class="fas fa-edit"></i>
|
||||
</a>
|
||||
</section>
|
||||
<section class="top-page__share-btn">
|
||||
<a target="_blank" href="http://twitter.com/intent/tweet?url=https://magical-girl.site&text=DropOut - 魔法少女にはなれなかった - / @eriri_jp">
|
||||
<i class="fab fa-twitter"></i>でシェアする
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
||||
</body>
|
||||
|
||||
@ -6,6 +6,10 @@ import preload_json from './config/preload'
|
||||
// components
|
||||
import './components/app.tag'
|
||||
|
||||
// init
|
||||
util.setRingSize()
|
||||
util.bindNav()
|
||||
|
||||
// loading
|
||||
util.startLoading(() => {
|
||||
util.preload(preload_json, () => {
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
const root = document.getElementById('root')
|
||||
const load_icon = document.querySelector('.load-view__body__panel__icon_type_4 .icon')
|
||||
const load_view = document.querySelector('.load-view')
|
||||
const load_view_body_close = document.querySelector('.load-view__body__close')
|
||||
const gab_animation = document.querySelector('.gab-animation')
|
||||
const root = document.getElementById('root')
|
||||
const load_icon = document.querySelector('.load-view__body__panel__icon_type_4 .icon')
|
||||
const load_view = document.querySelector('.load-view')
|
||||
const load_view_body_close = document.querySelector('.load-view__body__close')
|
||||
const gab_animation = document.querySelector('.gab-animation')
|
||||
const gab_animation__end_block = document.querySelector('.gab-animation__close .end-block')
|
||||
const calling = document.querySelector('.calling')
|
||||
const calling__end = document.querySelector('.calling__end')
|
||||
const end_animation = document.querySelector('.end-animation')
|
||||
const end_animation__end = document.querySelector('.end-animation .window img')
|
||||
const calling = document.querySelector('.calling')
|
||||
const calling__end = document.querySelector('.calling__end')
|
||||
const end_animation = document.querySelector('.end-animation')
|
||||
const end_animation__end = document.querySelector('.end-animation .window img')
|
||||
const top_page = document.querySelector('.top-page')
|
||||
const top_page__wrap = document.querySelector('.top-page .wrap')
|
||||
|
||||
/**
|
||||
* 画像のプリロード
|
||||
@ -54,6 +56,37 @@ export const isPC = () => {
|
||||
return !isSP()
|
||||
}
|
||||
|
||||
/**
|
||||
* top-page__ringのサイズを設定
|
||||
*/
|
||||
export const setRingSize = () => {
|
||||
const default_size = 650
|
||||
const window_size = top_page.clientHeight
|
||||
const per = window_size / default_size
|
||||
|
||||
top_page__wrap.style.transform = `scale(${ per })`
|
||||
}
|
||||
|
||||
/**
|
||||
* ナビゲーションボタンホバー時のイベント監視
|
||||
*/
|
||||
export const bindNav = () => {
|
||||
const navs = document.querySelectorAll('.top-page__global-nav a')
|
||||
|
||||
navs.forEach((nav, key) => {
|
||||
/* mouseover ------------------------------------------------- */
|
||||
nav.addEventListener('mouseover', e => {
|
||||
const color = e.target.getAttribute('data-color')
|
||||
top_page.setAttribute('data-color', color)
|
||||
})
|
||||
|
||||
/* mouseout -------------------------------------------------- */
|
||||
nav.addEventListener('mouseout', e => {
|
||||
top_page.setAttribute('data-color', '')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ロードの開始タイミングを取得
|
||||
* @param fn : コールバック関数
|
||||
@ -113,5 +146,13 @@ export const startEndAnimation = () => {
|
||||
|
||||
end_animation__end.addEventListener('animationend', e => {
|
||||
root.removeChild(end_animation)
|
||||
startTopPage()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* top-pageの開始
|
||||
*/
|
||||
export const startTopPage = () => {
|
||||
top_page.setAttribute('data-state', 'start')
|
||||
}
|
||||
|
||||
34
src/scss/keyframes/pc/_top-page.scss
Normal file
34
src/scss/keyframes/pc/_top-page.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@keyframes top-page__show-ring {
|
||||
from { transform: translateY(200px); opacity: 0; }
|
||||
to { transform: translateY(0px); opacity: 1; }
|
||||
}
|
||||
@keyframes top-page__rotate-ring {
|
||||
from { transform: rotate(0deg) scale(1.2); }
|
||||
to { transform: rotate(360deg) scale(1.2); }
|
||||
}
|
||||
|
||||
@keyframes top-page__show-message {
|
||||
from { width: 0; }
|
||||
to { width: 250px; }
|
||||
}
|
||||
@keyframes top-page__hidden-message {
|
||||
from { width: 250px; left: calc(50% - 125px); }
|
||||
to { width: 0px; left: 50%; }
|
||||
}
|
||||
|
||||
@keyframes top-page__scale-nav {
|
||||
from { width: 200px; left: calc(50% - 100px); }
|
||||
to { width: 700px; left: calc(50% - 350px); }
|
||||
}
|
||||
@keyframes top-page__rotate-nav-1 {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(20deg); }
|
||||
}
|
||||
@keyframes top-page__rotate-nav-2 {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(-20deg); }
|
||||
}
|
||||
@keyframes top-page__show-nav-text {
|
||||
from { color: transparent; }
|
||||
to { color: #fff; }
|
||||
}
|
||||
405
src/scss/modules/pc/_top-page.scss
Normal file
405
src/scss/modules/pc/_top-page.scss
Normal file
@ -0,0 +1,405 @@
|
||||
@include pc-layout {
|
||||
.top-page {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-bg;
|
||||
overflow: hidden;
|
||||
z-index: 996;
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
width: 100%; height: 100%;
|
||||
background-image: url(../images/bg.png);
|
||||
background-size: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&::before {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-bg;
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
}
|
||||
.top-page[data-color="pink"]:before { background-color: $theme-pink; }
|
||||
.top-page[data-color="light-pink"]:before { background-color: $theme-light-pink; }
|
||||
.top-page[data-color="purple"]:before { background-color: $theme-purple; }
|
||||
.top-page[data-color="light-purple"]:before { background-color: $theme-light-purple; }
|
||||
|
||||
/*** ring ***/
|
||||
.top-page__ring {
|
||||
position: absolute;
|
||||
top: calc(50% - 325px); left: calc(50% - 325px);
|
||||
width: 650px; height: 650px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
z-index: 1;
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0px; left: calc(50% - 50px);
|
||||
content: ""; display: block;
|
||||
width: 0; height: 0;
|
||||
border-top: solid 120px transparent;
|
||||
border-left: solid 45px transparent;
|
||||
border-right: solid 45px transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
div:nth-child(1n):after { border-top-color: $theme-pink; }
|
||||
div:nth-child(2n):after { border-top-color: $theme-light-pink; }
|
||||
div:nth-child(3n):after { border-top-color: $theme-purple; }
|
||||
div:nth-child(4n):after { border-top-color: $theme-light-purple; }
|
||||
div:nth-child(5n):after { border-top-color: $theme-gray; }
|
||||
div:nth-child(1) { transform: rotate(0deg); }
|
||||
div:nth-child(2) { transform: rotate(10deg); }
|
||||
div:nth-child(3) { transform: rotate(30deg); }
|
||||
div:nth-child(4) { transform: rotate(40deg); }
|
||||
div:nth-child(5) { transform: rotate(60deg); }
|
||||
div:nth-child(6) { transform: rotate(70deg); }
|
||||
div:nth-child(7) { transform: rotate(90deg); }
|
||||
div:nth-child(8) { transform: rotate(100deg); }
|
||||
div:nth-child(9) { transform: rotate(120deg); }
|
||||
div:nth-child(10) { transform: rotate(130deg); }
|
||||
div:nth-child(11) { transform: rotate(150deg); }
|
||||
div:nth-child(12) { transform: rotate(160deg); }
|
||||
div:nth-child(13) { transform: rotate(180deg); }
|
||||
div:nth-child(14) { transform: rotate(190deg); }
|
||||
div:nth-child(15) { transform: rotate(210deg); }
|
||||
div:nth-child(16) { transform: rotate(220deg); }
|
||||
div:nth-child(17) { transform: rotate(240deg); }
|
||||
div:nth-child(18) { transform: rotate(250deg); }
|
||||
div:nth-child(19) { transform: rotate(270deg); }
|
||||
div:nth-child(20) { transform: rotate(280deg); }
|
||||
div:nth-child(21) { transform: rotate(300deg); }
|
||||
div:nth-child(22) { transform: rotate(310deg); }
|
||||
div:nth-child(23) { transform: rotate(330deg); }
|
||||
div:nth-child(24) { transform: rotate(340deg); }
|
||||
}
|
||||
.inner { transform: scale(1.2); }
|
||||
}
|
||||
}
|
||||
|
||||
/*** main-illust ***/
|
||||
.top-page__main-illust {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-image: url(../images/top-page/gab.png);
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*** frame ***/
|
||||
.top-page__frame {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
width: 45px; height: 45px;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
background-color: $theme-purple;
|
||||
border-radius: 3px;
|
||||
opacity: 0.8;
|
||||
transform: scale(0);
|
||||
}
|
||||
div:nth-child(1),
|
||||
div:nth-child(3) { width: 12px; height: 12px; }
|
||||
div:nth-child(2) { width: 25px; height: 25px; }
|
||||
}
|
||||
section:nth-child(1) {
|
||||
top: 20px; left: 20px;
|
||||
div:nth-child(1) { top: 0; right: 0; }
|
||||
div:nth-child(2) { top: 0; left: 0; }
|
||||
div:nth-child(3) { bottom: 0; left: 0; }
|
||||
}
|
||||
section:nth-child(2) {
|
||||
top: 20px; right: 20px;
|
||||
div:nth-child(1) { top: 0; left: 0; }
|
||||
div:nth-child(2) { top: 0; right: 0; }
|
||||
div:nth-child(3) { bottom: 0; right: 0; }
|
||||
}
|
||||
section:nth-child(3) {
|
||||
bottom: 20px; left: 20px;
|
||||
div:nth-child(1) { top: 0; left: 0; }
|
||||
div:nth-child(2) { bottom: 0; left: 0; }
|
||||
div:nth-child(3) { bottom: 0; right: 0; }
|
||||
}
|
||||
section:nth-child(4) {
|
||||
bottom: 20px; right: 20px;
|
||||
div:nth-child(1) { top: 0; right: 0; }
|
||||
div:nth-child(2) { bottom: 0; right: 0; }
|
||||
div:nth-child(3) { bottom: 0; left: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** globa-nav ***/
|
||||
.top-page__global-nav {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.nav-box {
|
||||
position: absolute;
|
||||
top: calc(50% - 25px); left: calc(50% - 100px);
|
||||
width: 200px; height: 50px;
|
||||
opacity: 0;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: absolute; top: 0;
|
||||
width: 200px; height: 50px;
|
||||
border-radius: 30px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease 0s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
width: 60%; height: 1px;
|
||||
background-color: #fff;
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
&::before { top: 5px; left: 5px; transform: translateX(calc(-100% + -5px)); }
|
||||
&::after { bottom: 5px; right: 5px; transform: translateX(calc(100% + 5px)); }
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(1.2); border-radius: 0;
|
||||
&::before,
|
||||
&::after { transform: translateX(0); }
|
||||
}
|
||||
a:nth-child(1) { left: 0; }
|
||||
a:nth-child(2) { right: 0; }
|
||||
}
|
||||
section:nth-child(1) {
|
||||
a:nth-child(1) { background-color: $theme-pink; }
|
||||
a:nth-child(2) { background-color: $theme-light-pink; }
|
||||
}
|
||||
section:nth-child(2) {
|
||||
a:nth-child(1) { background-color: $theme-light-purple; }
|
||||
a:nth-child(2) { background-color: $theme-purple; }
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
position: absolute;
|
||||
left: calc(50% - 125px); top: calc(50% - 25px);
|
||||
width: 0px; height: 50px;
|
||||
border-radius: 30px;
|
||||
background-color: $theme-purple;
|
||||
box-shadow: 0 0 3px rgba(255,255,255,0.5);
|
||||
overflow: hidden;
|
||||
|
||||
h3 {
|
||||
width: 250px; height: 50px;
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** logo ***/
|
||||
.top-page__logo {
|
||||
position: absolute;
|
||||
top: calc(50% - 50px); left: 0;
|
||||
width: 100%; height: 100px;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: calc(50% - 150px); top: 0;
|
||||
display: block;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/*** sns ***/
|
||||
.top-page__sns {
|
||||
position: absolute;
|
||||
top: calc(50% - 75px); left: 0px;
|
||||
width: 50px; height: 150px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.4);
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
overflow: hidden;
|
||||
transform: translateX(calc(-100% + -5px));
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 50px; height: 50px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
content: ""; display: block;
|
||||
width: 100%; height: 100%;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.25s ease 0s;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 50px; height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: $theme-light-purple;
|
||||
}
|
||||
}
|
||||
a:hover:before { transform: translateX(0); }
|
||||
a:nth-child(1) {
|
||||
&::before { background-color: $theme-mint; }
|
||||
}
|
||||
a:nth-child(2) {
|
||||
&::before { background-color: $theme-gray; }
|
||||
}
|
||||
a:nth-child(3) {
|
||||
i { font-size: 22px; }
|
||||
&::before { background-color: $theme-light-pink; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** share-btn ***/
|
||||
.top-page__share-btn {
|
||||
position: absolute;
|
||||
right: 0; top: calc(50% - 25px);
|
||||
width: 140px; height: 50px;
|
||||
background-color: $theme-mint;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.4);
|
||||
transform: translateX(calc(100% + 5px));
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
color: $theme-purple;
|
||||
background-color: $theme-mint;
|
||||
|
||||
i { font-size: 20px; margin-right: 5px; }
|
||||
}
|
||||
}
|
||||
|
||||
.top-page[data-state="start"] {
|
||||
/*** ring ***/
|
||||
.top-page__ring {
|
||||
.inner {
|
||||
animation: top-page__rotate-ring 150s linear 0s infinite;
|
||||
div:nth-child(1n):after { animation: top-page__show-ring 0.4s ease 0s forwards; }
|
||||
div:nth-child(2n):after { animation: top-page__show-ring 0.4s ease 0.05s forwards; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** main-illust ***/
|
||||
.top-page__main-illust {
|
||||
animation:
|
||||
scale0-1 0.4s ease 0.2s forwards,
|
||||
fadein 0.4s ease 0.2s forwards;
|
||||
}
|
||||
|
||||
/*** frame ***/
|
||||
.top-page__frame {
|
||||
section {
|
||||
div:nth-child(2) { animation: scale0-1 0.4s ease 0.6s forwards; }
|
||||
div:nth-child(1),
|
||||
div:nth-child(3) { animation: scale0-1 0.4s ease 0.7s forwards; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** logo ***/
|
||||
.top-page__logo { animation: fadein 2s ease 2.7s forwards; }
|
||||
|
||||
/*** global-nav ***/
|
||||
.top-page__global-nav {
|
||||
.nav-box {
|
||||
animation: fadein 0.1s ease 1.4s forwards;
|
||||
section:nth-child(1) {
|
||||
animation:
|
||||
top-page__scale-nav 0.3s ease 1.4s forwards,
|
||||
top-page__rotate-nav-1 0.5s ease 1.7s forwards;
|
||||
a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
|
||||
a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
|
||||
}
|
||||
section:nth-child(2) {
|
||||
animation:
|
||||
top-page__scale-nav 0.3s ease 1.4s forwards,
|
||||
top-page__rotate-nav-2 0.5s ease 1.7s forwards;
|
||||
a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
|
||||
a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
animation:
|
||||
top-page__show-message 0.4s ease 1s forwards,
|
||||
top-page__hidden-message 0.5s ease 2s forwards;
|
||||
h3 {
|
||||
animation:
|
||||
slide-top 0.5s ease 1.2s forwards,
|
||||
fadeout 0.1s ease 2s forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** sns ***/
|
||||
.top-page__sns { animation: slide-right 0.4s ease 3s forwards; }
|
||||
|
||||
/*** share-btn ***/
|
||||
.top-page__share-btn { animation: slide-left 0.4s ease 3s forwards; }
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user