(Created page with "*{ padding: 0px; margin: 0px; font-size: 16px; color: #333; font-family: "Microsoft YaHei"; } a,a:link,a:visited,a:hover,a:active{ text-decoration: none; } ::-moz-select...") |
|||
Line 52: | Line 52: | ||
width: 1000px; | width: 1000px; | ||
height: 600px; | height: 600px; | ||
− | position: relative; | + | position: relative; |
margin: 30px auto; | margin: 30px auto; | ||
-webkit-perspective-origin: 50% 60%; | -webkit-perspective-origin: 50% 60%; | ||
Line 58: | Line 58: | ||
-webkit-perspective: 1500px; | -webkit-perspective: 1500px; | ||
perspective: 1500px; | perspective: 1500px; | ||
− | background: url(../ | + | background: url("https://static.igem.org/mediawiki/2019/b/b2/T--SEU--bookBg.png") no-repeat 0 0 ; |
background-size: 100% 100%; | background-size: 100% 100%; | ||
} | } | ||
Line 73: | Line 73: | ||
height: 580px; | height: 580px; | ||
top: 0; | top: 0; | ||
− | -webkit-transform-style: preserve-3d; | + | -webkit-transform-style: preserve-3d; |
− | -moz-transform-style: preserve-3d; | + | -moz-transform-style: preserve-3d; |
− | -ms-transform-style: preserve-3d; | + | -ms-transform-style: preserve-3d; |
− | -o-transform-style: preserve-3d; | + | -o-transform-style: preserve-3d; |
− | transform-style: preserve-3d; | + | transform-style: preserve-3d; |
-webkit-transition: all linear 2s; | -webkit-transition: all linear 2s; | ||
-moz-transition: all linear 2s; | -moz-transition: all linear 2s; | ||
Line 83: | Line 83: | ||
-o-transition: all linear 2s; | -o-transition: all linear 2s; | ||
transition: all linear 2s; | transition: all linear 2s; | ||
− | background: url(../ | + | background: url("https://static.igem.org/mediawiki/2019/f/f5/T--SEU--bookLeft.png") no-repeat; |
background-size: 479.26px 780px; | background-size: 479.26px 780px; | ||
background-position: 20.74px 8.3px; | background-position: 20.74px 8.3px; | ||
Line 90: | Line 90: | ||
position: absolute; | position: absolute; | ||
top: 50px; | top: 50px; | ||
− | left: 50px; | + | left: 50px; |
display: inline-block; | display: inline-block; | ||
− | width: 400px; | + | width: 400px; |
} | } | ||
.bookWord{ | .bookWord{ | ||
Line 105: | Line 105: | ||
backface-visibility: visible; | backface-visibility: visible; | ||
background-color: #f0f0f0;word-break:break-all; | background-color: #f0f0f0;word-break:break-all; | ||
− | -webkit-column-count: 2; | + | -webkit-column-count: 2; |
− | -webkit-column-gap: 40px; | + | -webkit-column-gap: 40px; |
− | -moz-column-count: 2; | + | -moz-column-count: 2; |
-moz-column-gap: 40px; | -moz-column-gap: 40px; | ||
− | -ms-column-count: 2; | + | -ms-column-count: 2; |
-ms-column-gap: 40px; | -ms-column-gap: 40px; | ||
− | column-count: 2; | + | column-count: 2; |
column-gap: 40px; | column-gap: 40px; | ||
} | } | ||
Line 146: | Line 146: | ||
.bookPage:last-child | .bookPage:last-child | ||
{ | { | ||
− | background: url(../ | + | background: url("https://static.igem.org/mediawiki/2019/9/99/T--SEU--bookRight.png") no-repeat; |
background-size: 479.26px 780px; | background-size: 479.26px 780px; | ||
background-position: 0 8.3px; | background-position: 0 8.3px; |
Revision as of 12:59, 20 September 2019
- {
padding: 0px; margin: 0px; font-size: 16px; color: #333; font-family: "Microsoft YaHei"; } a,a:link,a:visited,a:hover,a:active{ text-decoration: none; }
- -moz-selection {
background: #338FFF; color: #fff; }
- -webkit-selection {
background: #338FFF; color: #fff; }
- selection {
background: #338FFF; color: #fff; } .clear::after{ content: ""; display: block; height: 0px; clear: both; visibility: hidden; } .response-img{ display: block; max-width: 100%; } .text-overflow{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body{ width: 100%; max-width: 1920px; min-width: 1200px; background-color: #222222; }
- knowledge{
width: 100%;
height:100%;
position: relative;
padding: 40px 0;
}
.bookBox{
width: 1000px;
height: 600px;
position: relative;
margin: 30px auto;
-webkit-perspective-origin: 50% 60%;
perspective-origin: 50% 60%;
-webkit-perspective: 1500px;
perspective: 1500px;
background: url("") no-repeat 0 0 ;
background-size: 100% 100%;
}
.bookBox:hover .lastBtn{
display: block;
}
.bookBox:hover .nextBtn{
display: block;
}
/*书的高度*/
.bookPage{
position: absolute;
width: 500px;
height: 580px;
top: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all linear 2s;
-moz-transition: all linear 2s;
-ms-transition: all linear 2s;
-o-transition: all linear 2s;
transition: all linear 2s;
background: url("
") no-repeat;
background-size: 479.26px 780px;
background-position: 20.74px 8.3px;
}
.bookPage img{
position: absolute;
top: 50px;
left: 50px;
display: inline-block;
width: 400px;
}
.bookWord{
position: absolute;
top: 50px;
left: 50px;
display: inline-block;
width: 360px;
padding: 20px;
font-size: 20px;
line-height: 27px;
backface-visibility: visible;
background-color: #f0f0f0;word-break:break-all;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-moz-column-count: 2;
-moz-column-gap: 40px;
-ms-column-count: 2;
-ms-column-gap: 40px;
column-count: 2;
column-gap: 40px;
}
.bookWord span{
font-size: 30px;
font-weight: 600;
line-height: 40px;
}
.frist{
left: 0;
z-index: 1;
}
.frist img{
z-index: 1;
}
.last{
right: 0;
z-index: 1;
}
.last p{
z-index: 1;
}
.runPage{
right: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
/*书的高度*/
.runPage,
.bookPage:last-child
{
background: url("") no-repeat;
background-size: 479.26px 780px;
background-position: 0 8.3px;
}
.runClass{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.lastBtn,
.nextBtn
{
display: none;
position: absolute;
top: 300px;
cursor: pointer;
z-index: 999;
font-size: 50px;
line-height: 100px;
color: #fff;
text-decoration: none;
background-color: rgba(0,0,0,.5);
}
.lastBtn{
left: 0;
}
.nextBtn{
right: 0;
}
.canvasBox{
display: block;
width: 158px;
height: 158px;
}
/*页序号*/
.pageNumber{
position: absolute;
bottom: -40px;
right: 0;
font-size: 20px!important;
line-height: 30px;
}