Skip to content

Commit 6a2c9f2

Browse files
committed
no message
1 parent b1da81e commit 6a2c9f2

File tree

3 files changed

+316
-1
lines changed

3 files changed

+316
-1
lines changed

css/inspire.css

+107-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ content{
7676
transition: 1s;
7777
}
7878

79-
/*點墼守護精靈,從右邊出場*/
79+
/*點擊守護精靈,從右邊出場*/
8080
.inspire.come{
8181
right:-200%;
8282
}
@@ -828,8 +828,101 @@ content{
828828
/*===============================開場頁=========================*/
829829

830830

831+
/*左右動畫基本設定*/
832+
.opennig .left_banner{
833+
width: 100%;
834+
height: 51%;
835+
position: absolute; /*這樣動畫才跑得順*/
836+
top: 0px;
837+
opacity: 0.35;
838+
}
839+
840+
.opennig .right_banner{
841+
width: 100%;
842+
height: 50%;
843+
position: absolute; /*這樣動畫才跑得順*/
844+
top: 300px;
845+
opacity: 0.3;
846+
}
847+
848+
/*左右動畫*/
849+
.opennig .left_banner{
850+
animation: left_open 2s backwards;
851+
right: 0%; /*定位right的話,動畫才會從右到左展開*/
852+
background: linear-gradient(to left,#fff,#EFAEA2);
853+
}
854+
855+
.opennig .right_banner{
856+
animation: right_open 2s backwards;
857+
background: linear-gradient(to right,#fff,#A2D7C9);
858+
left:0%; /*定位left的話,動畫才會從左到右展開*/
859+
}
860+
861+
@keyframes left_open{
862+
0%{ width:0%;
863+
opacity: 0;
864+
background: linear-gradient(to left,#fff,#EFAEA2); }
865+
100%{ width:100%;
866+
opacity: 0.35;
867+
background: linear-gradient(to left,#fff,#EFAEA2); }
868+
}
869+
@keyframes right_open{
870+
0%{ width:0%;
871+
opacity: 0;
872+
background: linear-gradient(to right,#fff,#A2D7C9); }
873+
100%{ width:100%;
874+
opacity: 0.35;
875+
background: linear-gradient(to right,#fff,#A2D7C9); }
876+
}
877+
878+
/*取消hover文字-----------------*/
879+
880+
/*左邊*/
881+
.opennig .left_banner:hover{
882+
height: 51%;
883+
top: 0;
884+
}
885+
/*右邊*/
886+
.opennig .right_banner:hover{
887+
height: 50%;
888+
top: 300px;
889+
}
890+
891+
831892

893+
/*左右文字設定*/
832894

895+
.opennig .left_word{
896+
width: 50%;
897+
height: 40px;
898+
position: relative;
899+
display: block;
900+
top: 60px;
901+
left: 0;
902+
right: 0;
903+
margin:auto;
904+
background-image: url(../images/inspire/LW-small.svg);
905+
background-size: 100% 100%;
906+
907+
}
908+
909+
.opennig .right_word{
910+
width: 50%;
911+
height: 40px;
912+
position: relative;
913+
display: block;
914+
top: 450px;
915+
left: 0;
916+
right: 0;
917+
margin:auto;
918+
background-image: url(../images/inspire/RW-small.svg);
919+
background-size: 100% 100%;
920+
}
921+
/*左邊文字-----------------*/
922+
.opennig .left_word img, .opennig .right_word img{
923+
/*width: 90%;*/
924+
display: none;
925+
}
833926

834927

835928
/*===============================心測開場頁=========================*/
@@ -912,7 +1005,20 @@ content {
9121005
height: 300px;
9131006
}
9141007

1008+
/*左右文字設定*/
9151009

1010+
.opennig .left_word{
1011+
width: 50%;
1012+
height: 40px;
1013+
top: 130px;
1014+
1015+
}
1016+
1017+
.opennig .right_word{
1018+
width: 50%;
1019+
height: 40px;
1020+
top: 380px;
1021+
}
9161022

9171023

9181024

images/inspire/LW-small.svg

+109
Loading

0 commit comments

Comments
 (0)