|
|
| Line 2: |
Line 2: |
| | | | |
| | <html> | | <html> |
| − |
| |
| − | <style>
| |
| − |
| |
| − | /* ################################################################################ */
| |
| − | /*底部版权信息 开始 */
| |
| − |
| |
| − | #homefooterdiv {
| |
| − | position: absolute;
| |
| − | z-index: 98;
| |
| − | width: 100%;
| |
| − | top: 1652px;
| |
| − | }
| |
| − |
| |
| − | #homefooterdiv:before {
| |
| − | content: '';
| |
| − | width: 100%;
| |
| − | height: 10px;
| |
| − | background-color: #2F2F7F;
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | div#footer1 {
| |
| − | height: 180px;
| |
| − | width: 100%;
| |
| − | /*border: 5px #2F2F7F solid;*/
| |
| − | border-width: 5px 0 0 0;
| |
| − | background-color: #182647;
| |
| − | }
| |
| − |
| |
| − | #footer1mid {
| |
| − | width: 1200px;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | img#whitelogo {
| |
| − | width: 150px;
| |
| − | float: left;
| |
| − | margin-top: 65px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | #foormidword {
| |
| − | color: white;
| |
| − | hieght: 100%;
| |
| − | font-size: 17px;
| |
| − | padding: 10px 77px;
| |
| − | float: left;
| |
| − | margin-left: 244px;
| |
| − | margin-top: 75px;
| |
| − | }
| |
| − |
| |
| − | #foorrightdiv {
| |
| − | float: right;
| |
| − | color: white;
| |
| − | margin-top: 62px;
| |
| − | }
| |
| − |
| |
| − | #foorrightdiv p {
| |
| − | text-align: right;
| |
| − | font-size: 15px;
| |
| − | line-height: 25px;
| |
| − | }
| |
| − |
| |
| − | #footer2 {
| |
| − | width: 100%;
| |
| − | background-color: #121D33;
| |
| − | height: 40px;
| |
| − | text-align: center;
| |
| − | color: white;
| |
| − | font-size: 13px;
| |
| − | padding-top: 12px;
| |
| − | }
| |
| − |
| |
| − | /*底部版权信息 结束 */
| |
| − | /* ################################################################################ */
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ################################################################################ */
| |
| − | /* 所有元素动画效果 开始 */
| |
| − |
| |
| − | /*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/
| |
| − |
| |
| − | /*月亮 渐渐变清晰动画*/
| |
| − | .content .moon img {
| |
| − | transition: all 4s ease-out;
| |
| − | animation: mooning 4s linear infinite alternate;
| |
| − | -webkit-animation: mooning 4s linear infinite alternate;
| |
| − | -moz-animation: mooning 4s linear infinite alternate;
| |
| − | -o-animation：mooning 4s linear infinite alternate;
| |
| − | }
| |
| − |
| |
| − | /*月亮 渐渐变清晰动画 开始*/
| |
| − | @keyframes mooning {
| |
| − | 0% {
| |
| − | opacity: 0.5;
| |
| − | filter: alpha(opacity=50);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes mooning {
| |
| − | 0% {
| |
| − | opacity: 0.5;
| |
| − | filter: alpha(opacity=50);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes mooning {
| |
| − | 0% {
| |
| − | opacity: 0.5;
| |
| − | filter: alpha(opacity=50);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes mooning {
| |
| − | 0% {
| |
| − | opacity: 0.5;
| |
| − | filter: alpha(opacity=50);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*月亮 渐渐变清晰动画 结束*/
| |
| − |
| |
| − |
| |
| − | /*鱼 鼠标放在上面动画 开始*/
| |
| − | .fish_hover {
| |
| − | cursor: pointer;
| |
| − | transition: all 0.5s ease-in-out;
| |
| − | -webkit-transition: all 0.5s ease-in-out;
| |
| − | -moz-transition: all 0.5s ease-in-out;
| |
| − | -o-transition: all 0.5s ease-in-out;
| |
| − | opacity: 0.3;
| |
| − | filter: alpha(opacity=50);
| |
| − | }
| |
| − |
| |
| − | /*鱼 鼠标放在上面动画 结束*/
| |
| − |
| |
| − |
| |
| − | /*鱼骨头文字hover 鼠标放在上面动画 开始*/
| |
| − |
| |
| − | .fish_bone_title_hover {
| |
| − | animation: fish_bone_title 0.1s ease-in-out;
| |
| − | animation-fill-mode: forwards;
| |
| − |
| |
| − | -webkit-animation: fish_bone_title 0.1s ease-in-out;
| |
| − | -webkit-animation-fill-mode: forwards;
| |
| − | -moz-animation: fish_bone_title 0.1s ease-in-out;
| |
| − | -moz-animation-fill-mode: forwards;
| |
| − | -o-animation: fish_bone_title 0.1s ease-in-out;
| |
| − | -o-animation-fill-mode: forwards;
| |
| − | }
| |
| − |
| |
| − | @keyframes fish_bone_title {
| |
| − | from {}
| |
| − |
| |
| − | to {
| |
| − | cursor: pointer;
| |
| − | font-size: 22px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*鱼骨头文字hover 鼠标放在上面动画 结束*/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*水波动画 开始*/
| |
| − | .wave_back img {
| |
| − |
| |
| − | animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
| |
| − | -webkit-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
| |
| − | -moz-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
| |
| − | -o-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .wave_mid img {
| |
| − |
| |
| − | animation: wave_mid 5s ease infinite alternate;
| |
| − | -webkit-animation: wave_mid 5s ease infinite alternate;
| |
| − | -moz-animation: wave_mid 5s ease infinite alternate;
| |
| − | -o-animation: wave_mid 5s ease infinite alternate;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .wave_front img {
| |
| − |
| |
| − | animation: wave_front 10s ease infinite alternate;
| |
| − | -webkit-animation: wave_front 10s ease infinite alternate;
| |
| − | -moz-animation: wave_front 10s ease infinite alternate;
| |
| − | -o-animation: wave_front 10s ease infinite alternate;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @keyframes wave_back {
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 40px, 0);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0px, 0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes wave_back {
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 40px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes wave_back {
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 40px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes wave_back {
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 40px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes wave_mid {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.55;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 0x, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, -60px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes wave_mid {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.55;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 0x, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, -60px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes wave_mid {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.55;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 0x, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, -60px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes wave_mid {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 60px, 0);
| |
| − | opacity: 0.55;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, 0x, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, -60px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.75;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes wave_front {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes wave_front {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes wave_front {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes wave_front {
| |
| − |
| |
| − | 0% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | opacity: 0.99;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | transform: translate3d(0, -80px, 0);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*水波动画 结束*/
| |
| − |
| |
| − |
| |
| − | /*水花动画 开始*/
| |
| − | @keyframes spray1 {
| |
| − |
| |
| − | 0%,
| |
| − | 100% {
| |
| − | box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes spray1 {
| |
| − |
| |
| − | 0%,
| |
| − | 100% {
| |
| − | box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes spray1 {
| |
| − |
| |
| − | 0%,
| |
| − | 100% {
| |
| − | box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes spray1 {
| |
| − |
| |
| − | 0%,
| |
| − | 100% {
| |
| − | box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* 水花 开始 */
| |
| − | .spray {
| |
| − | position: absolute;
| |
| − | display: block;
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | background: #d6d2d2;
| |
| − | border-radius: 100%;
| |
| − | transition: all .5s cubic-bezier(1, 0.005, 0, 1.2);
| |
| − | z-index: 100;
| |
| − | }
| |
| − |
| |
| − | .spray1 {
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | transform: scale(.3);
| |
| − | top: 90px;
| |
| − | left: 316px;
| |
| − | transition-delay: .7s;
| |
| − | animation: spray1 5s linear infinite;
| |
| − | -webkit-animation: spray1 5s linear infinite;
| |
| − | -moz-animation: spray1 5s linear infinite;
| |
| − | -o-animation: spray1 5s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − |
| |
| − | .spray2 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 216px;
| |
| − | left: 316px;
| |
| − | transition-delay: .5s;
| |
| − | animation: spray1 5s linear infinite;
| |
| − | -webkit-animation: spray1 5s linear infinite;
| |
| − | -moz-animation: spray1 5s linear infinite;
| |
| − | -o-animation: spray1 5s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − |
| |
| − | .spray3 {
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | transform: scale(.3);
| |
| − | top: 372px;
| |
| − | left: 262px;
| |
| − | transition-delay: .5s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − |
| |
| − | .spray4 {
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | transform: scale(.3);
| |
| − | top: 116px;
| |
| − | left: 662px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray5 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 190px;
| |
| − | left: 730px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.7;
| |
| − | }
| |
| − |
| |
| − | .spray6 {
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | transform: scale(.5);
| |
| − | top: 290px;
| |
| − | left: 600px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.7;
| |
| − | }
| |
| − |
| |
| − | .spray7 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 330px;
| |
| − | left: 570px;
| |
| − | transition-delay: .1s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.9;
| |
| − | }
| |
| − |
| |
| − | .spray8 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 90px;
| |
| − | left: 870px;
| |
| − | transition-delay: .5s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.7;
| |
| − | }
| |
| − |
| |
| − | .spray9 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 158px;
| |
| − | left: 950px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.7;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray10 {
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | transform: scale(.5);
| |
| − | top: 348px;
| |
| − | left: 1100px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 8s linear infinite;
| |
| − | -webkit-animation: spray1 8s linear infinite;
| |
| − | -moz-animation: spray1 8s linear infinite;
| |
| − | -o-animation: spray1 8s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray11 {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | transform: scale(.5);
| |
| − | top: 118px;
| |
| − | left: 1320px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.7;
| |
| − | }
| |
| − |
| |
| − | .spray12 {
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | transform: scale(.5);
| |
| − | top: 350px;
| |
| − | left: 1490px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray13 {
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | transform: scale(.5);
| |
| − | top: 550px;
| |
| − | left: 470px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray14 {
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | transform: scale(.5);
| |
| − | top: 640px;
| |
| − | left: 520px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray15 {
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | transform: scale(.5);
| |
| − | top: 680px;
| |
| − | left: 748px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray16 {
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | transform: scale(.5);
| |
| − | top: 780px;
| |
| − | left: 808px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray17 {
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | transform: scale(.5);
| |
| − | top: 714px;
| |
| − | left: 1108px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray18 {
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | transform: scale(.5);
| |
| − | top: 550px;
| |
| − | left: 1308px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .spray19 {
| |
| − | width: 35px;
| |
| − | height: 35px;
| |
| − | transform: scale(.5);
| |
| − | top: 640px;
| |
| − | left: 1276px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .spray20 {
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | transform: scale(.5);
| |
| − | top: 1000px;
| |
| − | left: 1076px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 1;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray21 {
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | transform: scale(.5);
| |
| − | top: 1040px;
| |
| − | left: 1056px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray22 {
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | transform: scale(.5);
| |
| − | top: 820px;
| |
| − | left: 1206px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | .spray23 {
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | transform: scale(.5);
| |
| − | top: 880px;
| |
| − | left: 1606px;
| |
| − | transition-delay: .2s;
| |
| − | animation: spray1 10s linear infinite;
| |
| − | -webkit-animation: spray1 10s linear infinite;
| |
| − | -moz-animation: spray1 10s linear infinite;
| |
| − | -o-animation: spray1 10s linear infinite;
| |
| − | opacity: 0.8;
| |
| − | z-index: 0;
| |
| − | }
| |
| − |
| |
| − | /* 水花 结束 */
| |
| − |
| |
| − | /*水花动画 结束*/
| |
| − |
| |
| − |
| |
| − | /* 所有元素动画效果 结束 */
| |
| − | /* ################################################################################ */
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ################################################################################ */
| |
| − | /* 内容 开始 */
| |
| − | .content {
| |
| − | min-width: 1200px;
| |
| − | width: 100%;
| |
| − | position: absolute;
| |
| − | z-index: 2;
| |
| − | min-height: 1000px;
| |
| − | }
| |
| − |
| |
| − | .content .bg {
| |
| − | width: 100%;
| |
| − | height: 1150px;
| |
| − | }
| |
| − |
| |
| − | /*花*/
| |
| − | .content .flower {
| |
| − | position: absolute;
| |
| − | top: 114px;
| |
| − | z-index: 2;
| |
| − | }
| |
| − |
| |
| − | /*花图片*/
| |
| − | .content .flower img {
| |
| − | width: 370px;
| |
| − | }
| |
| − |
| |
| − | /*月亮*/
| |
| − | .content .moon {
| |
| − | position: absolute;
| |
| − | top: 100px;
| |
| − | left: 2%;
| |
| − | }
| |
| − |
| |
| − | /*月亮图片*/
| |
| − | .content .moon img {
| |
| − | width: 220px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | position: absolute;
| |
| − | top: 85px;
| |
| − | left: 770px;
| |
| − | z-index: 10;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | position: absolute;
| |
| − | z-index: 20;
| |
| − | width: 286px;
| |
| − | height: 420px;
| |
| − | top: 130px;
| |
| − | left: 760px;
| |
| − | border-bottom-right-radius: 50%;
| |
| − | /*减少div的范围*/
| |
| − | border-top-left-radius: 50%;
| |
| − | /*减少div的范围*/
| |
| − | border-bottom-left-radius: 50%;
| |
| − | /*减少div的范围*/
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | position: absolute;
| |
| − | z-index: 20;
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 1094px;
| |
| − | border-top-left-radius: 100%;
| |
| − | /*减少div的范围*/
| |
| − | border-bottom-right-radius: 88%;
| |
| − | /*减少div的范围*/
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | position: absolute;
| |
| − | z-index: 20;
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 950px;
| |
| − | border-top-right-radius: 100%;
| |
| − | /*减少div的范围*/
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | position: absolute;
| |
| − | top: 170px;
| |
| − | left: 780px;
| |
| − | z-index: 350;
| |
| − | }
| |
| − |
| |
| − | .content .fish img {
| |
| − | width: 560px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone img {
| |
| − | width: 450px;
| |
| − | min-width: 10px;
| |
| − | margin-left: 30px;
| |
| − | opacity: 0.5;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone a {
| |
| − | color: white;
| |
| − | font-size: 20px;
| |
| − | z-index: 300;
| |
| − | }
| |
| − |
| |
| − | /*鱼骨头文字开始*/
| |
| − | .content .fish_bone .fish_bone1 {
| |
| − | position: absolute;
| |
| − | top: 84px;
| |
| − | left: 100px;
| |
| − | transform: rotate(26deg);
| |
| − | -webkit-transform: rotate(26deg);
| |
| − | -moz-transform: rotate(26deg);
| |
| − | -o-transform: rotate(26deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone2 {
| |
| − | position: absolute;
| |
| − | top: 118px;
| |
| − | left: 64px;
| |
| − | transform: rotate(18deg);
| |
| − | -webkit-transform: rotate(18deg);
| |
| − | -moz-transform: rotate(18deg);
| |
| − | -o-transform: rotate(18deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone3 {
| |
| − | position: absolute;
| |
| − | top: 154px;
| |
| − | left: 66px;
| |
| − | transform: rotate(14deg);
| |
| − | -webkit-transform: rotate(14deg);
| |
| − | -moz-transform: rotate(14deg);
| |
| − | -o-transform: rotate(14deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone4 {
| |
| − | position: absolute;
| |
| − | top: 192px;
| |
| − | left: 54px;
| |
| − | transform: rotate(2deg);
| |
| − | -webkit-transform: rotate(2deg);
| |
| − | -moz-transform: rotate(2deg);
| |
| − | -o-transform: rotate(2deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone5 {
| |
| − | position: absolute;
| |
| − | top: 234px;
| |
| − | left: 54px;
| |
| − | transform: rotate(-11deg);
| |
| − | -webkit-transform: rotate(-11deg);
| |
| − | -moz-transform: rotate(-11deg);
| |
| − | -o-transform: rotate(-11deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone6 {
| |
| − | position: absolute;
| |
| − | top: 270px;
| |
| − | left: 74px;
| |
| − | transform: rotate(-16deg);
| |
| − | -webkit-transform: rotate(-16deg);
| |
| − | -moz-transform: rotate(-16deg);
| |
| − | -o-transform: rotate(-16deg);
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone7 {
| |
| − | position: absolute;
| |
| − | top: 310px;
| |
| − | left: 90px;
| |
| − | line-height: 20px;
| |
| − | transform: rotate(-26deg);
| |
| − | -webkit-transform: rotate(-26deg);
| |
| − | -moz-transform: rotate(-26deg);
| |
| − | -o-transform: rotate(-26deg);
| |
| − | }
| |
| − |
| |
| − | /*鱼骨头文字结束*/
| |
| − |
| |
| − |
| |
| − | /*尾巴*/
| |
| − | .content .tail img {
| |
| − | position: absolute;
| |
| − | top: 140px;
| |
| − | right: 0;
| |
| − | width: 1020px;
| |
| − | }
| |
| − |
| |
| − | .content .title {
| |
| − | position: absolute;
| |
| − | top: 172px;
| |
| − | left: 70%;
| |
| − | z-index: 1000;
| |
| − | }
| |
| − |
| |
| − | .content .title img {
| |
| − | width: 60%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*水波 上下波动*/
| |
| − | .wave {
| |
| − | background: url('images/home_background.jpg');
| |
| − | height: 300px;
| |
| − | transition: all 2s;
| |
| − | }
| |
| − |
| |
| − | .wave img {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .wave .wave_back {
| |
| − | position: absolute;
| |
| − | top: 454px;
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | .wave .wave_mid {
| |
| − | position: absolute;
| |
| − | top: 588px;
| |
| − | z-index: 2;
| |
| − | }
| |
| − |
| |
| − | .wave .wave_front {
| |
| − | position: absolute;
| |
| − | top: 574px;
| |
| − | z-index: 3;
| |
| − | }
| |
| − |
| |
| − | .content .description {
| |
| − | width: 100%;
| |
| − | background-color: #2A2854;
| |
| − | text-align: center;
| |
| − | position: absolute;
| |
| − | top: 1192px;
| |
| − | z-index: 10;
| |
| − | }
| |
| − |
| |
| − | .content .description img {
| |
| − | width: 1200px;
| |
| − | height: auto;
| |
| − | padding-top: 70px;
| |
| − | padding-bottom: 60px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*定义输出设备中的页面最大可见区域宽度。*/
| |
| − | /* ################################################################################ */
| |
| − |
| |
| − | @media only screen and (max-width: 2100px) {
| |
| − | .spray10 {
| |
| − | left: 1200px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 1800px) {
| |
| − | .spray10 {
| |
| − | left: 1200px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | top: 85px;
| |
| − | left: 612px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | top: 170px;
| |
| − | left: 620px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | width: 252px;
| |
| − | height: 400px;
| |
| − | top: 150px;
| |
| − | left: 620px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 930px;
| |
| − | border-bottom-right-radius: 88%;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 800px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 1700px) {
| |
| − | .spray10 {
| |
| − | left: 1200px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | top: 85px;
| |
| − | left: 512px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | top: 170px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | width: 252px;
| |
| − | height: 400px;
| |
| − | top: 150px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 830px;
| |
| − | border-bottom-right-radius: 88%;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 700px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 1600px) {
| |
| − | .spray10 {
| |
| − | left: 1200px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | top: 85px;
| |
| − | left: 512px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | top: 170px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | width: 252px;
| |
| − | height: 400px;
| |
| − | top: 150px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 830px;
| |
| − | border-bottom-right-radius: 88%;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 700px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width: 1500px) {
| |
| − | .spray10 {
| |
| − | left: 1200px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | top: 85px;
| |
| − | left: 512px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | top: 170px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | width: 252px;
| |
| − | height: 400px;
| |
| − | top: 150px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 830px;
| |
| − | border-bottom-right-radius: 88%;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 700px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* 屏幕 1366 开始 1366 1368 1400*/
| |
| − |
| |
| − | @media only screen and (max-width: 1400px) {
| |
| − | .content .bg img {
| |
| − | width: 100%;
| |
| − | height: 1150px;
| |
| − | }
| |
| − |
| |
| − | /*花图片*/
| |
| − | .content .flower img {
| |
| − | width: 352px;
| |
| − | }
| |
| − |
| |
| − | /*月亮*/
| |
| − | .content .moon {
| |
| − | top: 114px;
| |
| − | left: 30px;
| |
| − | }
| |
| − |
| |
| − | /*月亮图片*/
| |
| − | /*月亮 渐渐变清晰动画*/
| |
| − | .content .moon img {
| |
| − | width: 220px;
| |
| − | }
| |
| − |
| |
| − | /*鱼，鼠标滑过变暗*/
| |
| − | .content .fish {
| |
| − | top: 85px;
| |
| − | left: 512px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone {
| |
| − | top: 170px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish img {
| |
| − | width: 560px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone img {
| |
| − | width: 450px;
| |
| − | min-width: 10px;
| |
| − | margin-left: 30px;
| |
| − | }
| |
| − |
| |
| − | .content .tail img {
| |
| − | top: 178px;
| |
| − | right: 0;
| |
| − | width: 750px;
| |
| − | }
| |
| − |
| |
| − | .content .title {
| |
| − | top: 172px;
| |
| − | left: 70%;
| |
| − | }
| |
| − |
| |
| − | .content .title img {
| |
| − | width: 240px;
| |
| − | }
| |
| − |
| |
| − | /*水波 上下波动*/
| |
| − | .wave .wave_back {
| |
| − | top: 400px;
| |
| − | }
| |
| − |
| |
| − | .wave .wave_mid {
| |
| − | top: 508px;
| |
| − | }
| |
| − |
| |
| − | .wave .wave_front {
| |
| − | top: 508px;
| |
| − | }
| |
| − |
| |
| − | .content .description {
| |
| − | top: 930px;
| |
| − | }
| |
| − |
| |
| − | #homefooterdiv {
| |
| − | top: 1356px;
| |
| − | }
| |
| − |
| |
| − | .spray1 {
| |
| − | top: 90px;
| |
| − | left: 262px;
| |
| − | }
| |
| − |
| |
| − | .spray2 {
| |
| − | top: 206px;
| |
| − | left: 258px;
| |
| − | }
| |
| − |
| |
| − | .spray3 {
| |
| − | top: 320px;
| |
| − | left: 210px;
| |
| − | }
| |
| − |
| |
| − | .spray4 {
| |
| − | top: 100px;
| |
| − | left: 500px;
| |
| − | }
| |
| − |
| |
| − | .spray5 {
| |
| − | top: 150px;
| |
| − | left: 540px;
| |
| − | }
| |
| − |
| |
| − | .spray6 {
| |
| − | top: 250px;
| |
| − | left: 420px;
| |
| − | }
| |
| − |
| |
| − | .spray7 {
| |
| − | top: 280px;
| |
| − | left: 400px;
| |
| − | }
| |
| − |
| |
| − | .spray8 {
| |
| − | top: 80px;
| |
| − | left: 670px;
| |
| − | }
| |
| − |
| |
| − | .spray9 {
| |
| − | top: 150px;
| |
| − | left: 680px;
| |
| − | }
| |
| − |
| |
| − | .spray10 {
| |
| − | top: 320px;
| |
| − | left: 806px;
| |
| − | }
| |
| − |
| |
| − | .spray11 {
| |
| − | top: 136px;
| |
| − | left: 926px;
| |
| − | }
| |
| − |
| |
| − | .spray12 {
| |
| − | top: 316px;
| |
| − | left: 1070px;
| |
| − | }
| |
| − |
| |
| − | .spray13 {
| |
| − | top: 400px;
| |
| − | left: 360px;
| |
| − | }
| |
| − |
| |
| − | .spray14 {
| |
| − | top: 470px;
| |
| − | left: 380px;
| |
| − | }
| |
| − |
| |
| − | .spray15 {
| |
| − | top: 540px;
| |
| − | left: 548px;
| |
| − | }
| |
| − |
| |
| − | .spray16 {
| |
| − | top: 650px;
| |
| − | left: 580px;
| |
| − | }
| |
| − |
| |
| − | .spray17 {
| |
| − | top: 772px;
| |
| − | left: 758px;
| |
| − | }
| |
| − |
| |
| − | .spray18 {
| |
| − | top: 550px;
| |
| − | left: 1024px;
| |
| − | }
| |
| − |
| |
| − | .spray19 {
| |
| − | top: 790px;
| |
| − | left: 730px;
| |
| − | }
| |
| − |
| |
| − | .spray20 {
| |
| − | top: 650px;
| |
| − | left: 836px;
| |
| − | }
| |
| − |
| |
| − | .spray21 {
| |
| − | top: 710px;
| |
| − | left: 860px;
| |
| − | }
| |
| − |
| |
| − | .spray22 {
| |
| − | top: 720px;
| |
| − | left: 1134px;
| |
| − | }
| |
| − |
| |
| − | .spray23 {
| |
| − | top: 480px;
| |
| − | left: 990px;
| |
| − | }
| |
| − |
| |
| − | /*鱼骨头文字开始*/
| |
| − | .content .fish_bone .fish_bone1 {
| |
| − | top: 80px;
| |
| − | left: 94px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone2 {
| |
| − | top: 120px;
| |
| − | left: 60px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone3 {
| |
| − | top: 152px;
| |
| − | left: 60px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone4 {
| |
| − | top: 192px;
| |
| − | left: 50px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone5 {
| |
| − | top: 234px;
| |
| − | left: 44px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone6 {
| |
| − | top: 272px;
| |
| − | left: 66px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_bone .fish_bone7 {
| |
| − | top: 310px;
| |
| − | left: 96px;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − |
| |
| − | /*鱼骨头文字结束*/
| |
| − |
| |
| − | .content .fish_hover1 {
| |
| − | width: 252px;
| |
| − | height: 400px;
| |
| − | top: 150px;
| |
| − | left: 520px;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover2 {
| |
| − | width: 230px;
| |
| − | height: 200px;
| |
| − | top: 410px;
| |
| − | left: 830px;
| |
| − | border-bottom-right-radius: 88%;
| |
| − | }
| |
| − |
| |
| − | .content .fish_hover3 {
| |
| − | width: 170px;
| |
| − | height: 80px;
| |
| − | top: 510px;
| |
| − | left: 700px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* 屏幕 1366 结束*/
| |
| − | /* ################################################################################ */
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* 内容 结束 */
| |
| − | /* ################################################################################ */
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| | | | |
| | <!-- ################################################################################ --> | | <!-- ################################################################################ --> |
| Line 1,701: |
Line 105: |
| | | | |
| | </div> | | </div> |
| − |
| |
| | | | |
| | | | |
| | <!-- 内容 结束 --> | | <!-- 内容 结束 --> |
| | <!-- ################################################################################ --> | | <!-- ################################################################################ --> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| Line 1,741: |
Line 135: |
| | <!-- ################################################################################ --> | | <!-- ################################################################################ --> |
| | | | |
| − |
| |
| − |
| |
| − | <script>
| |
| − | $(document).ready(function() {
| |
| − |
| |
| − | //鱼上面的两个div被hover
| |
| − | $(".fish_hover1,.fish_hover2,.fish_hover3").hover(
| |
| − | function() {
| |
| − | $('.fish').addClass('fish_hover');
| |
| − | $('.fish_bone').fadeIn(2);
| |
| − | },
| |
| − | function() {
| |
| − | //$('.fish').removeClass('fish_hover');
| |
| − | //$('.fish_bone').hide();
| |
| − | });
| |
| − |
| |
| − | $(".fish_bone,.tail,.title").hover(
| |
| − | function() {
| |
| − |
| |
| − | },
| |
| − | function() {
| |
| − | console.log('fish_bone gone');
| |
| − | $('.fish').removeClass('fish_hover');
| |
| − | $('.fish').fadeIn(300);
| |
| − | $('.fish_bone').fadeOut(1);
| |
| − | console.log('fish_bone gone ok');
| |
| − |
| |
| − | });
| |
| − |
| |
| − | $(".fish_bone1,.fish_bone2,.fish_bone3,.fish_bone4,.fish_bone5,.fish_bone6,.fish_bone7,.fish_bone8").hover(
| |
| − | function() {
| |
| − | $(this).addClass('fish_bone_title_hover');
| |
| − | },
| |
| − | function() {
| |
| − | $(this).removeClass('fish_bone_title_hover');
| |
| − | });
| |
| − |
| |
| − |
| |
| − | });
| |
| − | </script>
| |
| | | | |
| | | | |
| | </html> | | </html> |
