781 lines
13 KiB
SCSS
781 lines
13 KiB
SCSS
.home-first-section {
|
|
height: 90vh;
|
|
min-height: 650px;
|
|
// background: linear-gradient(
|
|
// #1a2358 0%,
|
|
// #12277b 33%,
|
|
// #0c2d8f 67%,
|
|
// #002a89 100%
|
|
// );
|
|
background: linear-gradient(
|
|
#0037AF 0%,
|
|
#0c2d8f 100%,
|
|
);
|
|
|
|
// #003FCC 100%
|
|
|
|
.grid-picture {
|
|
position: relative;
|
|
height: 100%;
|
|
background: url(../img/grid.png) no-repeat;
|
|
background-size: 100% auto;
|
|
.waves {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -2px;
|
|
height: 10vh;
|
|
}
|
|
}
|
|
|
|
.website-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 80vh;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.website {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 100%;
|
|
margin-right: 3.5%;
|
|
color: #fff;
|
|
.website-title {
|
|
color: #fff;
|
|
font-size: 2.4em;
|
|
}
|
|
.website-vision {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 36px;
|
|
color: #ff832b;
|
|
font-size: 25px;
|
|
}
|
|
.website-des {
|
|
font-size: 1em;
|
|
line-height: 2.3;
|
|
margin-bottom: 1.5em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.website-more {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.play-img {
|
|
display: flex;
|
|
flex: none;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
position: relative;
|
|
width: 680px;
|
|
height: 580px;
|
|
img {
|
|
opacity: 0;
|
|
}
|
|
|
|
.play-glass {
|
|
position: relative;
|
|
width: 351px;
|
|
z-index: 1;
|
|
// animation: glass 0.75s 1 forwards;
|
|
}
|
|
.play-circle {
|
|
position: absolute;
|
|
width: 165px;
|
|
height: 160px;
|
|
right: 18%;
|
|
bottom: -5.5%;
|
|
z-index: 2;
|
|
// animation: circle 0.75s 1 forwards;
|
|
}
|
|
|
|
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 {
|
|
position: absolute;
|
|
width: 85px;
|
|
height: 53px;
|
|
right: 24.1%;
|
|
bottom: 9%;
|
|
z-index: 2;
|
|
border: 1px solid rgb(73, 169, 241);
|
|
// border: 1px solid rgb(49, 82, 237);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.play-pillar {
|
|
position: absolute;
|
|
left: -11%;
|
|
top: 37%;
|
|
width: 230px;
|
|
// animation: pillar 0.75s 1 forwards;
|
|
}
|
|
.play-box1 {
|
|
position: absolute;
|
|
left: -7%;
|
|
bottom: 30%;
|
|
width: 57px;
|
|
// animation: box1 0.75s 1 forwards;
|
|
}
|
|
.play-box2 {
|
|
position: absolute;
|
|
left: -1%;
|
|
bottom: 34%;
|
|
width: 57px;
|
|
// animation: box2 0.75s 1 forwards;
|
|
}
|
|
.play-box3 {
|
|
position: absolute;
|
|
left: 5%;
|
|
bottom: 38%;
|
|
width: 57px;
|
|
// animation: box3 0.75s 1 forwards;
|
|
}
|
|
.play-box4 {
|
|
position: absolute;
|
|
left: 11%;
|
|
bottom: 42%;
|
|
width: 57px;
|
|
// animation: box4 0.75s 1 forwards;
|
|
}
|
|
|
|
// .play-code {
|
|
// position: absolute;
|
|
// right: -4%;
|
|
// top: 18%;
|
|
// width: 211px;
|
|
// z-index: 1;
|
|
// }
|
|
.play-code1 {
|
|
position: absolute;
|
|
right: 1%;
|
|
top: 33%;
|
|
width: 128px;
|
|
z-index: 1;
|
|
}
|
|
.play-code-bed {
|
|
position: absolute;
|
|
right: -4%;
|
|
top: 44%;
|
|
width: 211px;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
.play-logo {
|
|
position: absolute;
|
|
top: 25%;
|
|
width: 87px;
|
|
z-index: 10;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
}
|
|
.play-text1 {
|
|
position: absolute;
|
|
z-index: 2;
|
|
// right: 5%;
|
|
// width: 262px;
|
|
// bottom: 11%;
|
|
}
|
|
.play-text2 {
|
|
position: absolute;
|
|
z-index: 2;
|
|
// bottom: 10%;
|
|
// left: 6%;
|
|
// width: 262px;
|
|
}
|
|
.play-text3 {
|
|
position: absolute;
|
|
// right: 6%;
|
|
// top: -4%;
|
|
// width: 227px;
|
|
}
|
|
.play-text4 {
|
|
position: absolute;
|
|
// top: 7%;
|
|
// left: 18%;
|
|
// width: 206px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
.website {
|
|
animation: website 0.75s 1 forwards;
|
|
}
|
|
.play-glass {
|
|
animation: glass 0.75s 1 forwards;
|
|
}
|
|
.play-circle {
|
|
animation: circle 0.75s 1 forwards;
|
|
}
|
|
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
|
|
animation: circle-before 0.75s 1 forwards;
|
|
}
|
|
// .play-pillar {
|
|
// animation: pillar 0.75s 1 forwards;
|
|
// }
|
|
.play-box1 {
|
|
animation: box1 0.75s 1 forwards;
|
|
}
|
|
.play-box2 {
|
|
animation: box2 0.75s 1 forwards;
|
|
}
|
|
.play-box3 {
|
|
animation: box3 0.75s 1 forwards;
|
|
}
|
|
.play-box4 {
|
|
animation: box4 0.75s 1 forwards;
|
|
}
|
|
// .play-code {
|
|
// animation: code 0.75s 1 forwards;
|
|
// }
|
|
.play-code1 {
|
|
animation: code1 0.75s 1 forwards;
|
|
}
|
|
.play-code-bed {
|
|
animation: codeBed 0.75s 1 forwards;
|
|
}
|
|
.play-logo {
|
|
animation: logo 6s 0.5s infinite; //linear
|
|
}
|
|
.play-text1 {
|
|
// animation: text1-show 0.5s 1 0.5s forwards;
|
|
animation: text1-show 6s 0.5s infinite;
|
|
}
|
|
.play-text2 {
|
|
animation: text2-show 6s 0.5s infinite;
|
|
}
|
|
.play-text3 {
|
|
animation: text3-show 6s 0.5s infinite;
|
|
}
|
|
.play-text4 {
|
|
animation: text4-show 6s 0.5s infinite;
|
|
}
|
|
|
|
.circulation {
|
|
.play-code1 {
|
|
animation: code1-circulation 6s infinite;
|
|
}
|
|
|
|
.play-box1 {
|
|
animation: box1-circulation 2s infinite;
|
|
}
|
|
|
|
.play-box2 {
|
|
animation: box2-circulation 2s infinite;
|
|
}
|
|
|
|
.play-box3 {
|
|
animation: box3-circulation 2s infinite;
|
|
}
|
|
|
|
.play-box4 {
|
|
animation: box4-circulation 2s infinite;
|
|
}
|
|
|
|
.play-circle-circle1{
|
|
animation: circle-circle 6s 0.25s infinite;
|
|
}
|
|
.play-circle-circle2{
|
|
animation: circle-circle 6s 2.25s infinite;
|
|
}
|
|
.play-circle-circle3{
|
|
animation: circle-circle 6s 4.25s infinite;
|
|
}
|
|
// .play-circle-circle4{
|
|
// animation: circle-circle 6s 4.5s infinite;
|
|
// }
|
|
// .play-circle-circle5{
|
|
// animation: circle-circle 6s 6s infinite;
|
|
// }
|
|
}
|
|
}
|
|
|
|
@keyframes website {
|
|
0% {
|
|
top: 25vh;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes glass {
|
|
0% {
|
|
opacity: 0;
|
|
transform: rotate(-25deg);
|
|
top: 5.5%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotate(0deg);
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes logo {
|
|
0% {
|
|
opacity: 1;
|
|
top: 23%;
|
|
// transform: scale(.5);
|
|
// transform: rotateY(0deg);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
top: 12%;
|
|
// transform: scale(1.2);
|
|
// transform: rotateY(360deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
top: 23%;
|
|
// transform: scale(.5);
|
|
// transform: rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
// logo动效方案一
|
|
// @keyframes logo {
|
|
// 10% {
|
|
// opacity: 0;
|
|
// top: 33%;
|
|
// transform: rotateY(0deg);
|
|
// }
|
|
// 50% {
|
|
// opacity: 1;
|
|
// top: 12%;
|
|
// transform: rotateY(360deg);
|
|
// }
|
|
// 90% {
|
|
// opacity: 0;
|
|
// top: 33%;
|
|
// transform: rotateY(360deg);
|
|
// }
|
|
// }
|
|
|
|
// logo动效方案二
|
|
// @keyframes logo {
|
|
// 15% {
|
|
// opacity: 0;
|
|
// top: 33%;
|
|
// // transform: rotate(0deg);
|
|
// }
|
|
// 40% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateX(0deg);
|
|
// }
|
|
// 60% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateX(360deg);
|
|
// }
|
|
// 85% {
|
|
// opacity: 0;
|
|
// top: 40%;
|
|
// // transform: rotateY(360deg);
|
|
// }
|
|
// }
|
|
|
|
// logo动效方案三
|
|
// @keyframes logo {
|
|
// 0% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateY(0deg);
|
|
// }
|
|
|
|
// 25% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateY(90deg);
|
|
// }
|
|
// 50% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateY(180deg);
|
|
// }
|
|
|
|
// 75% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateY(270deg);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// top: 10%;
|
|
// transform: rotateY(360deg);
|
|
// }
|
|
// }
|
|
|
|
@keyframes circle {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: -10%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: -5.5%;
|
|
}
|
|
}
|
|
|
|
@keyframes circle-before {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: -1%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: 9%;
|
|
}
|
|
}
|
|
|
|
// @keyframes pillar {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// top: 47%;
|
|
// }
|
|
// 100% {
|
|
// opacity: 1;
|
|
// top: 38%;
|
|
// }
|
|
// }
|
|
|
|
@keyframes box1 {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: 20%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: 30%;
|
|
}
|
|
}
|
|
|
|
@keyframes box2 {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: 24%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: 34%;
|
|
}
|
|
}
|
|
|
|
@keyframes box3 {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: 28%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: 38%;
|
|
}
|
|
}
|
|
|
|
@keyframes box4 {
|
|
0% {
|
|
opacity: 0;
|
|
bottom: 32%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
bottom: 42%;
|
|
}
|
|
}
|
|
|
|
@keyframes box1-circulation {
|
|
0% {
|
|
opacity: 1;
|
|
height: 60px;
|
|
}
|
|
48% {
|
|
height: 65px;
|
|
}
|
|
52% {
|
|
height: 65px;
|
|
}
|
|
100% {
|
|
height: 60px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes box2-circulation {
|
|
0% {
|
|
height: 96px;
|
|
opacity: 1;
|
|
}
|
|
48% {
|
|
height: 90px;
|
|
}
|
|
52% {
|
|
height: 90px;
|
|
}
|
|
100% {
|
|
height: 96px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes box3-circulation {
|
|
0% {
|
|
height: 128px;
|
|
opacity: 1;
|
|
}
|
|
48% {
|
|
height: 135px;
|
|
}
|
|
52% {
|
|
height: 135px;
|
|
}
|
|
100% {
|
|
height: 128px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes box4-circulation {
|
|
0% {
|
|
height: 113px;
|
|
opacity: 1;
|
|
}
|
|
48% {
|
|
height: 108px;
|
|
}
|
|
52% {
|
|
height: 108px;
|
|
}
|
|
100% {
|
|
height: 113px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// @keyframes code {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// top: 40%;
|
|
// }
|
|
// 100% {
|
|
// opacity: 1;
|
|
// top: 30%;
|
|
// }
|
|
// }
|
|
|
|
@keyframes code1 {
|
|
0% {
|
|
opacity: 0;
|
|
top: 43%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
top: 33%;
|
|
}
|
|
}
|
|
|
|
@keyframes code1-circulation {
|
|
0% {
|
|
opacity: 1;
|
|
top: 33%;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
top: 30%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
top: 33%;
|
|
}
|
|
}
|
|
|
|
@keyframes codeBed {
|
|
0% {
|
|
opacity: 0;
|
|
top: 54%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
top: 44%;
|
|
}
|
|
}
|
|
|
|
@keyframes text1-show {
|
|
5% {
|
|
opacity: 0;
|
|
width: 0;
|
|
bottom: 36%;
|
|
right: 60%;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
width: 262px;
|
|
bottom: 12%;
|
|
left: 55%;
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
width: 262px;
|
|
bottom: 12%;
|
|
left: 55%;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 0;
|
|
bottom: 36%;
|
|
right: 60%;
|
|
}
|
|
}
|
|
|
|
@keyframes text2-show {
|
|
5% {
|
|
opacity: 0;
|
|
width: 0;
|
|
bottom: 36%;
|
|
right: 60%;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
width: 262px;
|
|
bottom: 10%;
|
|
right: 56%;
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
width: 262px;
|
|
bottom: 10%;
|
|
right: 56%;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 0;
|
|
bottom: 36%;
|
|
right: 60%;
|
|
}
|
|
}
|
|
|
|
@keyframes text3-show {
|
|
5% {
|
|
opacity: 0;
|
|
width: 0;
|
|
right: 36%;
|
|
top: 50%;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
right: 8%;
|
|
top: 6%;
|
|
width: 227px;
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
right: 8%;
|
|
top: 6%;
|
|
width: 227px;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 0;
|
|
right: 36%;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes text4-show {
|
|
5% {
|
|
opacity: 0;
|
|
width: 0;
|
|
right: 50%;
|
|
top: 50%;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
top: 14%;
|
|
right: 55%;
|
|
width: 206px;
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
top: 14%;
|
|
right: 55%;
|
|
width: 206px;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
width: 0;
|
|
right: 50%;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes circle-circle {
|
|
// 0% {
|
|
// transform: scale(1);
|
|
// opacity: 1;
|
|
// bottom: 9%;
|
|
// }
|
|
|
|
// 20% {
|
|
// transform: scale(1.1);
|
|
// opacity: 0.75;
|
|
// bottom: 9.25%;
|
|
// }
|
|
|
|
// 40% {
|
|
// transform: scale(1.25);
|
|
// opacity: 0.5;
|
|
// bottom: 9.6%;
|
|
// }
|
|
|
|
// 60% {
|
|
// transform: scale(1.45);
|
|
// opacity: 0.35;
|
|
// bottom: 10.1%;
|
|
// }
|
|
|
|
// 80% {
|
|
// transform: scale(1.7);
|
|
// opacity: 0.2;
|
|
// bottom: 10.6%;
|
|
// }
|
|
|
|
// 100% {
|
|
// transform: scale(2);
|
|
// opacity: 0;
|
|
// bottom: 11.5%;
|
|
// }
|
|
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
bottom: 9%;
|
|
}
|
|
|
|
33% {
|
|
transform: scale(1.2);
|
|
opacity: 0.7;
|
|
bottom: 9.5%;
|
|
}
|
|
|
|
|
|
67% {
|
|
transform: scale(1.5);
|
|
opacity: 0.35;
|
|
bottom: 10.2%;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
bottom: 11.5%;
|
|
}
|
|
}
|
|
}
|