mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 02:24:16 +00:00
updated splash screen
This commit is contained in:
parent
326c63b457
commit
89943a6446
@ -1,49 +1,49 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import './index.less'
|
||||
import styles from './index.less'
|
||||
import React from "react"
|
||||
import "./index.less"
|
||||
|
||||
export default class AppSplash extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className={classnames(styles.wrapper, {[styles.fadeout]: this.props.fadeout})} style={this.props.fadeout? { animationDuration: `${this.props.fadeout}ms` } : null} >
|
||||
<div className="bouncy-logo">
|
||||
<div className="ball">
|
||||
<svg viewBox="0 0 100 120">
|
||||
<path
|
||||
d="M77.55 29.69L92 18.78a1.42 1.42 0 00.25-2 39.2 39.2 0 00-56.31-4.21A38.05 38.05 0 0023.23 42a38.09 38.09 0 003.62 15.1A38.65 38.65 0 0037.8 70.84 39.46 39.46 0 0083.37 73a38.26 38.26 0 008.41-7.4 1.41 1.41 0 00-.23-2L77.65 53a1.43 1.43 0 00-1.9.15 17 17 0 01-3.2 2.85 17.75 17.75 0 01-9 2.88c-8.32.31-13.62-5.69-14-6.13a17.68 17.68 0 01-4.13-10.13 17.93 17.93 0 014.56-13 17.46 17.46 0 0121.72-3.28 17.3 17.3 0 014 3.2 1.41 1.41 0 001.85.15z"
|
||||
style={{
|
||||
backdropFilter: "blur(2px)",
|
||||
}}
|
||||
fill="rgba(51,51,51,.45)"
|
||||
/>
|
||||
<path
|
||||
d="M13 63.17a2.77 2.77 0 013.75 1.43 48.38 48.38 0 0015.32 19.93 48.83 48.83 0 0020.27 8.77 47.37 47.37 0 0040.23-11.5 2.77 2.77 0 014 .3l6.23 7.4a2.79 2.79 0 01-.21 3.83 63.83 63.83 0 01-6 5 62.21 62.21 0 01-7.44 4.7A60.84 60.84 0 0177 108a62.3 62.3 0 01-27 1.51 62.51 62.51 0 01-9.82-2.51A61.5 61.5 0 0120.1 95.69 61.73 61.73 0 012.41 71a2.79 2.79 0 011.42-3.55z"
|
||||
style={{
|
||||
backdropFilter: "blur(2px)",
|
||||
}}
|
||||
fill="rgba(51,51,51,.45)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="shadow"><div className="ball-shadow"></div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class AppSplash2 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="c-logo js-logo is-small">
|
||||
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
|
||||
<g>
|
||||
<polygon className="c-logo__svg-item c-logo__svg-item--arrow" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default class Splash extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="splash-wrapper">
|
||||
<div className="bouncy-logo">
|
||||
<div className="ball">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 100 120"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="glowingLinearGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#d03c4a" offset="10%" />
|
||||
<stop stopColor="#ac4ada" offset="20%" />
|
||||
<stop stopColor="#0087ff" offset="30%" />
|
||||
<stop stopColor="#2400ff" offset="40%" />
|
||||
<stop stopColor="#ff1d7a" offset="70%" />
|
||||
<stop stopColor="#f5381b" offset="80%" />
|
||||
<stop stopColor="#ff5335" offset="90%" />
|
||||
<stop stopColor="#691eff" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
style={{ stroke: "url(#glowingLinearGradient)" }}
|
||||
d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
|
||||
/>
|
||||
<path
|
||||
style={{ stroke: "url(#glowingLinearGradient)" }}
|
||||
d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="glow"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,172 +1,179 @@
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.splash-wrapper {
|
||||
background-color: #252525;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #efefef;
|
||||
color: #2d2d2d;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation-duration: 1500ms;
|
||||
|
||||
&.fadeout{
|
||||
opacity: 0;
|
||||
animation-name: out;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
animation: background-fade 5.1s linear 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.bouncy-logo{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
.glow {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
|
||||
animation: glow-splash 4.1s ease-out 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
filter: blur(160px);
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
will-change: contents;
|
||||
background: conic-gradient(
|
||||
from 230.29deg at 51.63% 52.16%,
|
||||
#2400ff 0deg,
|
||||
#0087ff 67.5deg,
|
||||
#ff1d7a 198.75deg,
|
||||
#f5381b 251.25deg,
|
||||
#ff5335 301.88deg,
|
||||
#691eff 360deg
|
||||
);
|
||||
}
|
||||
|
||||
.bouncy-logo {
|
||||
will-change: transition, opacity, z-index;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
transform: translate(-10px, 0);
|
||||
animation: logo-bounce 0.5s alternate infinite forwards;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
opacity: 1;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-bounce;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-duration: 1s;
|
||||
animation-name: my-bounce;
|
||||
animation-iteration-count: infinite;
|
||||
stroke-width: 1.5;
|
||||
stroke-opacity: 1;
|
||||
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
|
||||
fill: transparent;
|
||||
|
||||
animation: logo-reveal 5.1s ease-out 0.5s forwards, logo-stroke 2.1s ease-out 0s forwards,
|
||||
logo-transform 5.1s ease-out 0s forwards;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@keyframes glow-splash {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
|
||||
animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
|
||||
}
|
||||
|
||||
15% {
|
||||
opacity: 1;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
|
||||
animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
|
||||
}
|
||||
97% {
|
||||
z-index: 4;
|
||||
}
|
||||
100% {
|
||||
z-index: 4;
|
||||
opacity: 0.28;
|
||||
}
|
||||
}
|
||||
|
||||
.bouncy-logo .ball-shadow {
|
||||
margin: auto;
|
||||
background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%);
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-grow;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-duration: 1s;
|
||||
animation-name: my-grow;
|
||||
animation-iteration-count: infinite;
|
||||
@keyframes background-fade {
|
||||
0% {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
|
||||
animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
|
||||
}
|
||||
|
||||
15% {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
|
||||
animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
|
||||
}
|
||||
|
||||
60% {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes my-grow {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
@keyframes my-grow {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes my-bounce {
|
||||
from {
|
||||
top: 0;
|
||||
}
|
||||
to {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
@keyframes my-bounce {
|
||||
from {
|
||||
top: 0;
|
||||
}
|
||||
to {
|
||||
top: 10%;
|
||||
}
|
||||
@keyframes logo-bounce {
|
||||
from {
|
||||
transform: translate(0, -10px);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.c-logo{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
&__svg{
|
||||
width: 280px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__svg-item{
|
||||
fill: #242424;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
|
||||
&--text{
|
||||
transition: all 0.2s ease-in-out 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&--arrow{
|
||||
transition: all 0.36s ease-in-out 0s;
|
||||
animation-name: Load;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes logo-transform {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||
transform: scale(5) rotate(65deg);
|
||||
filter: blur(10px);
|
||||
}
|
||||
17% {
|
||||
filter: unset;
|
||||
}
|
||||
18% {
|
||||
filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1));
|
||||
}
|
||||
19% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Load {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
50%{
|
||||
transform: translateX(-171px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
@keyframes logo-reveal {
|
||||
0% {
|
||||
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||
}
|
||||
7% {
|
||||
fill: transparent;
|
||||
}
|
||||
10% {
|
||||
fill: rgba(225, 225, 225, 0.8);
|
||||
}
|
||||
40% {
|
||||
fill: rgba(225, 225, 225, 0.8);
|
||||
}
|
||||
100% {
|
||||
fill: rgba(51, 51, 51, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes out {
|
||||
0% {
|
||||
opacity: 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes logo-stroke {
|
||||
0% {
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
10% {
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user