Difference between revisions of "Team:Jilin China/home"

Line 205: Line 205:
  
 
   <div class="stem-loop">
 
   <div class="stem-loop">
 +
  <div>
 +
    <input id="checked_2" type="checkbox" class="switch" />
 +
  </div>
 +
 +
  <svg class="hot-repressive" xmlns="http://www.w3.org/2000/svg" width="599.75" height="278.7" viewBox="0 0 599.75 278.7">
 +
    <defs>
 +
    <style>
 +
      .hot-induced .a, .b, .c, .f {
 +
    fill: none;
 +
    stroke-width: 11px;
 +
      }
 +
 +
      .hot-induced .a {
 +
    stroke: #036;
 +
      }
 +
 +
      .hot-induced .a,.hot-induced  .b,.hot-induced  .c,.hot-induced  .f,.hot-induced  .g {
 +
    stroke-linecap: round;
 +
    stroke-linejoin: round;
 +
      }
 +
 +
      .hot-induced .b {
 +
    stroke: #060;
 +
      }
 +
 +
      .hot-induced .c {
 +
    stroke: #600;
 +
      }
 +
 +
      .hot-induced .d,.hot-induced  .e,.hot-induced  .h{
 +
    font-size: 17px;
 +
    font-family: Quicksand-Medium, Quicksand;
 +
      }
 +
 +
      .hot-induced .d {
 +
    fill: #006837;
 +
      }
 +
 +
      .hot-induced .e {
 +
    fill: #900;
 +
      }
 +
 +
      .hot-induced .f {
 +
    stroke: #000;
 +
      }
 +
 +
    .hot-induced .h {
 +
    fill: #930;
 +
      }
 +
 +
      .hot-induced .g {
 +
    fill: #fff794;
 +
    stroke: #fbb03b;
 +
    stroke-width: 7px;
 +
      }
 +
    .hot-induced .hydrogen-bond{
 +
      opacity:1;
 +
      transition: all 0.3s linear 1s;
 +
    }
 +
    .hot-induced #RNAse_E{
 +
      transform: translateY(-60px);
 +
      opacity:0;
 +
      transition: all 1s ease-out 0s;
 +
    }
 +
    .hot-induced #ribosome_text{
 +
      opacity:0;
 +
      transition: all 0.3s linear 0s;
 +
    }
 +
    .hot-induced #text{
 +
      transform: translateY(0px);
 +
      transition: all 1s ease-out;
 +
    }
 +
    .hot-induced #loop{
 +
      transform: translateY(0px);
 +
      transition: all 2s ease-out;
 +
    }
 +
    .hot-induced #left,#right{
 +
      stroke-dasharray:130,500;
 +
      transition: all 2s ease-out;
 +
    }
 +
    .hot-induced #left{
 +
      stroke-dashoffset:0;
 +
      stroke:red;
 +
    }
 +
    .hot-induced #right{
 +
      stroke-dashoffset:-277;
 +
      stroke:green;
 +
    }
 +
    .hot-induced #left_s,#right_s{
 +
      stroke-dasharray:60,500;
 +
      color:black;
 +
      transition: all 2s ease-out;
 +
    }
 +
    .hot-induced #left_s{
 +
      stroke-dashoffset:-130;
 +
    }
 +
    .hot-induced #right_s{
 +
      stroke-dashoffset:-217;
 +
    }
 +
 +
    .hot-induced.svg_checked .hydrogen-bond{
 +
      opacity:0;
 +
      transition: all 0.3s linear 0s;
 +
    }
 +
    .hot-induced.svg_checked #RNAse_E{
 +
      transform: translateY(0px);
 +
      opacity:1;
 +
      transition: all 0.5s ease-out 2s;
 +
    }
 +
    .hot-induced.svg_checked #ribosome_text{
 +
      opacity:1;
 +
      transition: all 0.5s ease-out 2s;
 +
    }
 +
    .hot-induced.svg_checked #text{
 +
      transform: translateY(-60px);
 +
    }
 +
    .hot-induced.svg_checked #loop{
 +
      transform: translateY(130px);
 +
    }
 +
    .hot-induced.svg_checked #left{
 +
      stroke-dashoffset:-135;
 +
    }
 +
    .hot-induced.svg_checked #right{
 +
      stroke-dashoffset:-142;
 +
    }
 +
    .hot-induced.svg_checked #left_s,#right_s{
 +
      stroke-dasharray:60,500;
 +
    }
 +
    .hot-induced.svg_checked #left_s{
 +
      stroke-dashoffset:-265;
 +
    }
 +
    .hot-induced.svg_checked #right_s{
 +
      stroke-dashoffset:-82;
 +
    }
 +
 +
    </style>
 +
    </defs>
 +
    <title>Stroke Version_1</title>
 +
    <g>
 +
    <g class="hydrogen-bond">
 +
      <line class="a" x1="284.86" y1="144.21" x2="320.72" y2="144.21"/>
 +
      <line class="b" x1="284.86" y1="125.32" x2="320.72" y2="125.32"/>
 +
      <line class="c" x1="284.86" y1="163.09" x2="320.72" y2="163.09"/>
 +
      <line class="a" x1="284.86" y1="181.98" x2="320.72" y2="181.98"/>
 +
      <line class="b" x1="284.86" y1="200.87" x2="320.72" y2="200.87"/>
 +
      <line class="c" x1="284.86" y1="219.75" x2="320.72" y2="219.75"/>
 +
    </g>
 +
    <g id="text">
 +
      <text class="d" transform="translate(429.01 185.45)">RC</text>
 +
      <text class="e" transform="translate(123.8 185.45)">anti-RC</text>
 +
 +
    </g>
 +
 +
    <text id="ribosome_text" class="h" transform="translate(385.48 175.45)">RNAse E</text>
 +
 +
    <path id="loop" class="f" d="M327,101.42c0-21.25,19.2-20.39,19.2-52.51,0-24-16.62-43.41-43.42-43.41s-43.41,19.44-43.41,43.41c0,28.79,19.19,29.92,19.19,52.51"/>
 +
 +
    <g>
 +
      <path id="right_s" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
 +
      <path id="left_s" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
 +
    </g>
 +
    <g>
 +
      <path id="right" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
 +
      <path id="left" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
 +
    </g> 
 +
<g id="RNAse_E">
 +
 +
      <path class="g" d="M417,187.26a40.56,40.56,0,0,0-39.11,51.23L417,229.77l-24.18,30.57A40.54,40.54,0,1,0,417,187.26Z"/>
 +
  <circle class="g" cx="402.84" cy="214.07" r="1.00"/>
 +
    </g>
 +
    </g>
 +
  </svg>
 +
 +
 +
  <script type="text/javascript">
 +
    $(document).ready(function(){
 +
      $("#checked_2").click(function(){
 +
        if($(this).is(':checked')){
 +
          $(".hot-repressive").addClass("svg_checked");
 +
        }else{
 +
          $(".hot-repressive").removeClass("svg_checked");
 +
      }
 +
      });
 +
    });
 +
  </script>
 
   </div>
 
   </div>
 
   <div class="stem-loop">
 
   <div class="stem-loop">

Revision as of 05:52, 3 October 2018

Stroke Version_1 SD Sequence anti-SD Sequence Ribosome

Hot-induced 5'UTR

Stroke Version_1 RC anti-RC RNAse E