@@ -76,7 +76,7 @@ content{
76
76
transition : 1s ;
77
77
}
78
78
79
- /*點墼守護精靈 ,從右邊出場*/
79
+ /*點擊守護精靈 ,從右邊出場*/
80
80
.inspire .come {
81
81
right : -200% ;
82
82
}
@@ -828,8 +828,101 @@ content{
828
828
/*===============================開場頁=========================*/
829
829
830
830
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
+
831
892
893
+ /*左右文字設定*/
832
894
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
+ }
833
926
834
927
835
928
/*===============================心測開場頁=========================*/
@@ -912,7 +1005,20 @@ content {
912
1005
height : 300px ;
913
1006
}
914
1007
1008
+ /*左右文字設定*/
915
1009
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
+ }
916
1022
917
1023
918
1024
0 commit comments