Difference between revisions of "Template:SEU/Notebook"

(Created page with "<style> .book{ height: 10rem; width: 40%; background: #FFF; position: absolute; right:10%; top:4rem; transform: rotateX(30deg); -webkit-transform: rotateX(30...")
 
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<style>
+
<html>
−
  .book{
+
−
  height: 10rem;
+
−
  width: 40%;
+
−
  background: #FFF;
+
−
  position: absolute;
+
−
  right:10%;
+
−
  top:4rem;
+
−
  transform: rotateX(30deg);
+
−
  -webkit-transform: rotateX(30deg);
+
−
  -ms-transform: rotateX(30deg);
+
−
  -o-transform: rotateX(30deg); }
+
−
  /*每页的公共样式*/
+
−
  .book-page {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  width: 100%;
+
−
  height:10rem;
+
−
  border: 1px solid #1976D2;
+
−
  text-align: center;
+
−
  background-color: #fff; }
+
−
  .book-page p{
+
−
  font-size: 1.2rem;
+
−
  margin-top: 2rem;
+
−
  color: #ff6300;
+
−
  backface-visibility:hidden;
+
−
  -webkit-backface-visibility:hidden; }
+
−
/*首页样式*/
+
−
  .first-page{
+
−
  background-color: #1976D2; }
+
−
  /*动画部分*/
+
−
  /*I'm the home page动画*/
+
−
  .flip-animation-start {
+
−
  animation: flipBook1 3s forwards;
+
−
  -moz-animation: flipBook1 3s forwards; /* Firefox */
+
−
  -webkit-animation: flipBook1 3s forwards; /* Safari and Chrome */
+
−
  -o-animation: flipBook1 3s forwards; /* Opera */
+
−
  }
+
−
  .flip-animation-end {
+
−
  animation: flipBook2 3s forwards;
+
−
  -moz-animation: flipBook2 3s forwards; /* Firefox */
+
−
  -webkit-animation: flipBook2 3s forwards; /* Safari and Chrome */
+
−
  -o-animation: flipBook2 3s forwards; /* Opera */ }
+
−
  @keyframes flipBook1 {
+
−
    0% {
+
−
    -webkit-transform: rotateY(0deg);
+
−
    -ms-transform: rotateY(0deg);
+
−
    -o-transform: rotateY(0deg);
+
−
    transform: rotateY(0deg);
+
−
    }
+
−
    100% {
+
−
    -webkit-transform: rotateY(-160deg);
+
−
    -ms-transform: rotateY(-160deg);
+
−
    -o-transform: rotateY(-160deg);
+
−
    transform: rotateY(-160deg);
+
−
    }
+
−
  }
+
−
  /*关闭书页*/
+
−
  @keyframes flipBook2 {
+
−
    0% {
+
−
    -webkit-transform: rotateY(-160deg);
+
−
    -ms-transform: rotateY(-160deg);
+
−
    -o-transform: rotateY(-160deg);
+
−
    transform: rotateY(-160deg);
+
−
    }
+
−
    100% {
+
−
    -webkit-transform: rotateY(0deg);
+
−
    -ms-transform: rotateY(0deg);
+
−
    -o-transform: rotateY(0deg);
+
−
    transform: rotateY(0deg);
+
−
    }
+
−
  }
+
−
</style>
+
  
−
<script>
 
−
$('.now_page').click(function(){
 
−
if($(this).hasClass('flip-animation-start')){
 
−
$(this).removeClass('flip-animation-start').addClass('flip-animation-end');
 
−
        }
 
−
else{
 
−
        $(this).removeClass('flip-animation-end').addClass('flip-animation-start');
 
−
        }
 
−
})
 
−
</script>
 
  
−
 
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:SEU/Notebook/CSS?action=raw&ctype=text/css">
−
<html>
+
<script type="text/javascript" src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript"></script>
−
  <div class="book preserve-3d">
+
<section id="knowledge" class="viewBlock">
−
    <div class="now_page point">
+
<div class="bookBox">
−
      <div class="book-page">
+
<a class="lastBtn"><</a>
−
      <p>第三页</p>
+
<a class="nextBtn">></a>
−
      </div>
+
<div class="bookPage frist">
−
    </div>
+
<img src="https://static.igem.org/mediawiki/2019/1/1d/T--SEU--pg1.png" />
−
    <div class="now_page point">
+
</div>
−
      <div class="book-page">
+
<div class="bookPage runPage">
−
      <p>第二页</p>
+
<img src="https://static.igem.org/mediawiki/2019/7/7a/T--SEU--pg2.png" />
−
      </div>
+
</div>
−
    </div>
+
<div class="bookPage runPage">
−
    <div class="now_page point">
+
<img src="https://static.igem.org/mediawiki/2019/3/37/T--SEU--pg3.png" />
−
      <div class="book-page ">
+
</div>
−
      <p>第一页</p>
+
<div class="bookPage runPage">
−
      </div>
+
<img src="https://static.igem.org/mediawiki/2019/d/d7/T--SEU--pg4.png" />
−
    </div>
+
</div>
−
<!--封面-->
+
<div class="bookPage runPage">
−
    <div class="point now_page">
+
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--SEU--pg5.png" />
−
      <div class="book-page first-page">
+
</div>
−
      <p>封面</p>
+
<div class="bookPage runPage">
−
      </div>
+
<img src="https://static.igem.org/mediawiki/2019/5/59/T--SEU--pg6.png" />
−
    </div>
+
</div>
−
  </div>
+
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/a/a0/T--SEU--pg7.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/b/b8/T--SEU--pg8.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/7/7c/T--SEU--pg9.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/b/bd/T--SEU--pg10.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/4/4e/T--SEU--pg11.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/4/4b/T--SEU--pg12.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/a/a4/T--SEU--pg13.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/7/72/T--SEU--pg14.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/8/8c/T--SEU--pg15.png" />
 +
</div>
 +
<div class="bookPage runPage">
 +
<img src="https://static.igem.org/mediawiki/2019/3/33/T--SEU--pg16.png" />
 +
</div>
 +
<div class="bookPage last">
 +
<img src="https://static.igem.org/mediawiki/2019/5/53/T--SEU--pg17.png" />
 +
</div>
 +
</div>
 +
</section>
 +
<script type="text/javascript" src="https://2019.igem.org/Template:SEU/Notebook/JS?action=raw&ctype=text/javascript"></script>
 
</html>
 
</html>

Latest revision as of 14:35, 20 October 2019

< >