(27 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{HZAU-China}} | {{HZAU-China}} | ||
− | |||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Line 16: | Line 16: | ||
transition: opacity 1s; | transition: opacity 1s; | ||
-webkit-transition: opacity 1s; | -webkit-transition: opacity 1s; | ||
+ | } | ||
+ | |||
+ | .fourC_div { | ||
+ | width: 100%; | ||
+ | margin: 48px auto 0 auto; | ||
} | } | ||
.fourC { | .fourC { | ||
width: 100%; | width: 100%; | ||
− | + | height: auto; | |
− | margin-top: | + | } |
+ | |||
+ | |||
+ | #anniu { | ||
+ | position: relative; | ||
+ | top: 70px; | ||
+ | transition: top 0.2s; | ||
+ | left: 50%; | ||
+ | margin: 0 0 0 -50px; | ||
+ | } | ||
+ | |||
+ | #anniu>img { | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | #anniu:hover { | ||
+ | top: 90px; | ||
} | } | ||
.di { | .di { | ||
width: 100%; | width: 100%; | ||
− | |||
position: relative; | position: relative; | ||
top: 600px; | top: 600px; | ||
+ | margin: -350px auto 0 auto; | ||
+ | vertical-align: middle; | ||
} | } | ||
Line 40: | Line 62: | ||
.zhanshiqu { | .zhanshiqu { | ||
position: relative; | position: relative; | ||
− | |||
} | } | ||
/*-- 轮播图主体样式-- */ | /*-- 轮播图主体样式-- */ | ||
+ | |||
+ | .bianda { | ||
+ | width: 1200px; | ||
+ | margin: 300px auto 0 auto; | ||
+ | } | ||
#rongqi { | #rongqi { | ||
width: 950px; | width: 950px; | ||
− | height: | + | height: 570px; |
− | margin: | + | margin: 0 auto; |
border-radius: 5px; | border-radius: 5px; | ||
overflow: hidden; | overflow: hidden; | ||
Line 58: | Line 84: | ||
.shiying { | .shiying { | ||
width: 950px; | width: 950px; | ||
− | height: | + | height: 570px; |
} | } | ||
Line 92: | Line 118: | ||
#rongqi span { | #rongqi span { | ||
display: inline-block; | display: inline-block; | ||
− | width: | + | width: 50px; |
− | height: | + | height: 22px; |
− | margin: 0 | + | margin: 0 10px; |
− | border-radius: | + | border-radius: 11px; |
background: white; | background: white; | ||
transition: width 0.3s; | transition: width 0.3s; | ||
Line 101: | Line 127: | ||
#rongqi span.yundong { | #rongqi span.yundong { | ||
− | width: | + | width: 78px; |
background: #A08989; | background: #A08989; | ||
} | } | ||
Line 144: | Line 170: | ||
} | } | ||
− | @-webkit-keyframes mymove | + | @-moz-keyframes mymove { |
− | + | from {} | |
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
− | + | @-o-keyframes mymove { | |
from {} | from {} | ||
to { | to { | ||
Line 161: | Line 198: | ||
} | } | ||
− | @-webkit-keyframes mymove_2 | + | @-moz-keyframes mymove_2 { |
− | + | from {} | |
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
− | + | @-o-keyframes mymove_2 { | |
from {} | from {} | ||
to { | to { | ||
Line 214: | Line 262: | ||
-webkit-animation: mymove 10s infinite; | -webkit-animation: mymove 10s infinite; | ||
animation-timing-function: linear; | animation-timing-function: linear; | ||
− | background: url(https://static.igem.org/mediawiki/2017/ | + | background: url(https://static.igem.org/mediawiki/2017/c/c0/T--HZAU-China--gear.png); |
background-size: 250px 250px; | background-size: 250px 250px; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: cover; | background-size: cover; | ||
z-index: -1; | z-index: -1; | ||
+ | } | ||
+ | |||
+ | #tiaozhuan { | ||
+ | position: absolute; | ||
+ | top: -135px; | ||
} | } | ||
Line 228: | Line 281: | ||
margin: 0 50%; | margin: 0 50%; | ||
width: 1020px; | width: 1020px; | ||
− | height: | + | height: 630px; |
left: -510px; | left: -510px; | ||
z-index: 1; | z-index: 1; | ||
Line 235: | Line 288: | ||
.frame_tu { | .frame_tu { | ||
width: 1020px; | width: 1020px; | ||
− | height: | + | height: 630px; |
} | } | ||
</style> | </style> | ||
Line 241: | Line 294: | ||
<body> | <body> | ||
− | <div class=" | + | <div class="fourC_div"> |
− | <img class="fourC" src="https://static.igem.org/mediawiki/2017/ | + | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/8d/T--HZAU-China--4C.gif"> |
− | + | <div> | |
− | + | <a id="anniu" href="#tiaozhuan"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"> | |
− | <div | + | </a> |
− | < | + | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class=" | + | </div> |
− | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/ | + | <div class="bianda"> |
− | + | <div class="zhanshiqu"> | |
− | + | <!-- 大小齿轮们 --> | |
− | + | <div class="hezi"> | |
− | + | <div id="tiaozhuan"></div> | |
− | + | <div class="chilun_1"></div> | |
− | + | <div class="chilun_2"></div> | |
− | + | <div class="chilun_3"></div> | |
− | + | </div> | |
− | + | <div class="frame"> | |
− | + | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" /> | |
− | + | </div> | |
+ | <div id="rongqi"> | ||
+ | <!-- 插入轮播的图片们 --> | ||
+ | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/6/64/T--HZAU-China--confirm2.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/4/4a/T--HZAU-China--confirm3.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/8/88/T--HZAU-China--confirm4.png" /> | ||
+ | <!-- 插入轮播的页码们 --> | ||
+ | <div style="top: 543px;"> | ||
+ | <span class="yundong" name="0"></span> | ||
+ | <span name="1"></span> | ||
+ | <span name="2"></span> | ||
+ | </div> | ||
+ | <!-- 插入图片的描述们 --> | ||
+ | <p class="yundong"></p> | ||
+ | <p></p> | ||
+ | <p></p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
<div> | <div> | ||
− | <img class="di" src="https://static.igem.org/mediawiki/2017/ | + | <img class="di" src="https://static.igem.org/mediawiki/2017/c/c7/T--HZAU-China--di.png"> |
</div> | </div> | ||
</body> | </body> | ||
Line 309: | Line 370: | ||
//每2s调用changeSlide函数进行图片轮播 | //每2s调用changeSlide函数进行图片轮播 | ||
− | var slideon = setInterval(changeSlide, | + | var slideon = setInterval(changeSlide, 60000); |
rongqi.onmouseover = function () { | rongqi.onmouseover = function () { | ||
Line 315: | Line 376: | ||
} | } | ||
rongqi.onmouseout = function () { | rongqi.onmouseout = function () { | ||
− | slideon = setInterval(changeSlide, | + | slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件 |
} | } | ||
Latest revision as of 01:31, 2 November 2017