Line 1: | Line 1: | ||
{{:Team:Jilin_China/CSS}} | {{:Team:Jilin_China/CSS}} | ||
− | |||
{{:Team:Jilin_China/Navbar}} | {{:Team:Jilin_China/Navbar}} | ||
{{:Team:Jilin_China/Js}} | {{:Team:Jilin_China/Js}} | ||
− | <html>< | + | {{:Team:Jilin_China/Home_CSS}} |
+ | {{:Team:Jilin_China/Footer_CSS}} | ||
+ | <html> | ||
+ | <style> | ||
− | < | + | |
− | <h1 | + | </style> |
+ | </html> | ||
+ | |||
+ | <html> | ||
+ | <div class="s1" style="display:none;height:99999%;"></div> | ||
+ | <section class="ss1 home_banner"> | ||
+ | <div class="banner_logo"></div> | ||
+ | <h1>The Collection of<br>Synthetic RNA-based Thermosensors<br>with Different Sensing Temperatures</h1> | ||
+ | <div class="bg-giraffe"> | ||
+ | <div> | ||
+ | <div></div> | ||
+ | <div></div> | ||
+ | <div></div> | ||
+ | <div></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section class="ss2 home_design"> | ||
+ | <div class="bacteria"> | ||
+ | |||
+ | <div class="stem-loop hot-induced"> | ||
+ | |||
+ | <input id="checked_1" type="checkbox" class="switch" /> | ||
+ | |||
+ | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" 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 #ribosome{ | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | .svg_checked_hi .hydrogen-bond{ | ||
+ | opacity:0; | ||
+ | transition: all 0.3s linear 0s; | ||
+ | } | ||
+ | .svg_checked_hi #ribosome{ | ||
+ | transform: translateY(0px); | ||
+ | opacity:1; | ||
+ | transition: all 0.5s ease-out 2s; | ||
+ | } | ||
+ | .svg_checked_hi #ribosome_text{ | ||
+ | opacity:1; | ||
+ | transition: all 0.5s ease-out 2s; | ||
+ | } | ||
+ | .svg_checked_hi #text{ | ||
+ | transform: translateY(-60px); | ||
+ | } | ||
+ | .svg_checked_hi #loop{ | ||
+ | transform: translateY(130px); | ||
+ | } | ||
+ | .svg_checked_hi #left{ | ||
+ | stroke-dashoffset:-135; | ||
+ | } | ||
+ | .svg_checked_hi #right{ | ||
+ | stroke-dashoffset:-142; | ||
+ | } | ||
+ | .svg_checked_hi #left_s,#right_s{ | ||
+ | stroke-dasharray:60,500; | ||
+ | } | ||
+ | .svg_checked_hi #left_s{ | ||
+ | stroke-dashoffset:-265; | ||
+ | } | ||
+ | .svg_checked_hi #right_s{ | ||
+ | stroke-dashoffset:-82; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </defs> | ||
+ | <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(349.01 185.45)">SD Sequence</text> | ||
+ | <text class="e" transform="translate(123.8 185.45)">anti-SD Sequence</text> | ||
+ | |||
+ | </g> | ||
+ | |||
+ | <text id="ribosome_text" class="h" transform="translate(378.48 185.45)">Ribosome</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="ribosome"> | ||
+ | <ellipse class="g" cx="417.04" cy="225.7" rx="35.56" ry="22.5"/> | ||
+ | <ellipse class="g" cx="417.04" cy="261.7" rx="23.44" ry="13.5"/> | ||
+ | </g> | ||
+ | </g> | ||
+ | </svg> | ||
+ | <p>Hot-induced 5'UTR</p> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $("#checked_1").click(function(){ | ||
+ | if($(this).is(':checked')){ | ||
+ | $(".hot-induced").addClass("svg_checked_hi"); | ||
+ | }else{ | ||
+ | $(".hot-induced").removeClass("svg_checked_hi"); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <div class="stem-loop hot-repressive"> | ||
+ | |||
+ | <input id="checked_2" type="checkbox" class="switch" /> | ||
+ | |||
+ | |||
+ | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599.75 278.7"> | ||
+ | <defs> | ||
+ | <style> | ||
+ | .hot-repressive .a, .b, .c, .f { | ||
+ | fill: none; | ||
+ | stroke-width: 11px; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .a { | ||
+ | stroke: #036; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .a,.hot-repressive .b,.hot-repressive .c,.hot-repressive .f,.hot-repressive .g { | ||
+ | stroke-linecap: round; | ||
+ | stroke-linejoin: round; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .b { | ||
+ | stroke: #060; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .c { | ||
+ | stroke: #600; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .d,.hot-repressive .e,.hot-repressive .h{ | ||
+ | font-size: 17px; | ||
+ | font-family: Quicksand-Medium, Quicksand; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .d { | ||
+ | fill: #006837; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .e { | ||
+ | fill: #900; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .f { | ||
+ | stroke: #000; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .h { | ||
+ | fill: #930; | ||
+ | } | ||
+ | |||
+ | .hot-repressive .g { | ||
+ | fill: #fff794; | ||
+ | stroke: #fbb03b; | ||
+ | stroke-width: 7px; | ||
+ | } | ||
+ | .hot-repressive .hydrogen-bond{ | ||
+ | opacity:1; | ||
+ | transition: all 0.3s linear 1s; | ||
+ | } | ||
+ | .hot-repressive #RNAse_E{ | ||
+ | transform: translateY(-60px); | ||
+ | opacity:0; | ||
+ | transition: all 1s ease-out 0s; | ||
+ | } | ||
+ | .hot-repressive #ribosome_text{ | ||
+ | opacity:0; | ||
+ | transition: all 0.3s linear 0s; | ||
+ | } | ||
+ | .hot-repressive #text{ | ||
+ | transform: translateY(0px); | ||
+ | transition: all 1s ease-out; | ||
+ | } | ||
+ | .hot-repressive #loop{ | ||
+ | transform: translateY(0px); | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .hot-repressive #left,#right{ | ||
+ | stroke-dasharray:130,500; | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .hot-repressive #left{ | ||
+ | stroke-dashoffset:0; | ||
+ | stroke:red; | ||
+ | } | ||
+ | .hot-repressive #right{ | ||
+ | stroke-dashoffset:-277; | ||
+ | stroke:green; | ||
+ | } | ||
+ | .hot-repressive #left_s,#right_s{ | ||
+ | stroke-dasharray:60,500; | ||
+ | color:black; | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .hot-repressive #left_s{ | ||
+ | stroke-dashoffset:-130; | ||
+ | } | ||
+ | .hot-repressive #right_s{ | ||
+ | stroke-dashoffset:-217; | ||
+ | } | ||
+ | |||
+ | .hot-repressive.svg_checked .hydrogen-bond{ | ||
+ | opacity:0; | ||
+ | transition: all 0.3s linear 0s; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #RNAse_E{ | ||
+ | transform: translateY(0px); | ||
+ | opacity:1; | ||
+ | transition: all 0.5s ease-out 2s; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #ribosome_text{ | ||
+ | opacity:1; | ||
+ | transition: all 0.5s ease-out 2s; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #text{ | ||
+ | transform: translateY(-60px); | ||
+ | } | ||
+ | .hot-repressive.svg_checked #loop{ | ||
+ | transform: translateY(130px); | ||
+ | } | ||
+ | .hot-repressive.svg_checked #left{ | ||
+ | stroke-dashoffset:-135; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #right{ | ||
+ | stroke-dashoffset:-142; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #left_s,#right_s{ | ||
+ | stroke-dasharray:60,500; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #left_s{ | ||
+ | stroke-dashoffset:-265; | ||
+ | } | ||
+ | .hot-repressive.svg_checked #right_s{ | ||
+ | stroke-dashoffset:-82; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </defs> | ||
+ | <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 style="clear:both"></div> | ||
+ | <div class="stem-loop cold-induced"> | ||
+ | |||
+ | <input id="checked_3" type="checkbox" class="switch" /> | ||
+ | |||
+ | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.12 206.26"> | ||
+ | <defs> | ||
+ | <style> | ||
+ | .cold-induced .a,.cold-induced .b,.cold-induced .c { | ||
+ | fill: none; | ||
+ | stroke-linecap: round; | ||
+ | stroke-linejoin: round; | ||
+ | stroke-width: 11px; | ||
+ | } | ||
+ | .cold-induced .a { | ||
+ | stroke: #036; | ||
+ | } | ||
+ | .cold-induced .b { | ||
+ | stroke: #060; | ||
+ | } | ||
+ | .cold-induced .c { | ||
+ | stroke: #600; | ||
+ | } | ||
+ | .cold-induced .l{ | ||
+ | fill: none; | ||
+ | stroke-linecap: round; | ||
+ | stroke-linejoin: round; | ||
+ | stroke: #000; | ||
+ | stroke-width: 11px; | ||
+ | } | ||
+ | .hydrogen-bond { | ||
+ | opacity: 1; | ||
+ | transition: all 0.3s ease 1s; | ||
+ | } | ||
+ | .rotate{ | ||
+ | transition: all 1s ease; | ||
+ | transform: rotate(90deg); | ||
+ | } | ||
+ | .r1{ | ||
+ | transform-origin: 41% 85.7%; | ||
+ | transition-delay:0.5s; | ||
+ | } | ||
+ | .r2{ | ||
+ | transform-origin: 54% 14.5%; | ||
+ | } | ||
+ | .cold-induced.svg_checked .rotate{ | ||
+ | transform: rotate(30deg); | ||
+ | } | ||
+ | .cold-induced.svg_checked .hydrogen-bond{ | ||
+ | opacity:0; | ||
+ | transition: all 0.3s ease 0s; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </defs> | ||
+ | <g> | ||
+ | <path class="l rotate r1" d="M177.06,176.54a24.23,24.23,0,0,1-24.23,24.22H5.5"/> | ||
+ | <path class="l" d="M201.28,5.5a24.22,24.22,0,0,0-24.22,24.22V176.54a24.23,24.23,0,0,1-24.23,24.22"/> | ||
+ | <path class="l rotate r2" d="M348.62,5.5H201.28a24.22,24.22,0,0,0-24.22,24.22"/> | ||
+ | <g class="hydrogen-bond"> | ||
+ | <line class="a" x1="219.21" y1="86.31" x2="183.35" y2="86.31"/> | ||
+ | <line class="b" x1="219.21" y1="67.42" x2="183.35" y2="67.42"/> | ||
+ | <line class="c" x1="219.21" y1="48.54" x2="183.35" y2="48.54"/> | ||
+ | </g> | ||
+ | <g class="hydrogen-bond"> | ||
+ | <line class="a" x1="170.76" y1="150.31" x2="134.9" y2="150.31"/> | ||
+ | <line class="b" x1="170.76" y1="169.2" x2="134.9" y2="169.2"/> | ||
+ | <line class="c" x1="170.76" y1="131.42" x2="134.9" y2="131.42"/> | ||
+ | <line class="a" x1="170.76" y1="112.54" x2="134.9" y2="112.54"/> | ||
+ | </g> | ||
+ | </g> | ||
+ | </svg> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $("#checked_3").click(function(){ | ||
+ | if($(this).is(':checked')){ | ||
+ | $(".cold-induced").addClass("svg_checked"); | ||
+ | }else{ | ||
+ | $(".cold-induced").removeClass("svg_checked"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </div> | ||
+ | <div class="stem-loop cold-repressive"> | ||
+ | |||
+ | <input id="checked_4" type="checkbox" class="switch" /> | ||
+ | |||
+ | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599.75 278.7"> | ||
+ | <defs> | ||
+ | <style> | ||
+ | .cold-repressive .a, .b, .c, .f { | ||
+ | fill: none; | ||
+ | stroke-width: 11px; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .a { | ||
+ | stroke: #036; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .a,.cold-repressive .b,.cold-repressive .c,.cold-repressive .f,.cold-repressive .g { | ||
+ | stroke-linecap: round; | ||
+ | stroke-linejoin: round; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .b { | ||
+ | stroke: #060; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .c { | ||
+ | stroke: #600; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .d,.cold-repressive .e,.cold-repressive .h{ | ||
+ | font-size: 17px; | ||
+ | font-family: Quicksand-Medium, Quicksand; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .d { | ||
+ | fill: #006837; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .e { | ||
+ | fill: #900; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .f { | ||
+ | stroke: #000; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .h { | ||
+ | fill: #930; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .g { | ||
+ | fill: #fff794; | ||
+ | stroke: #fbb03b; | ||
+ | stroke-width: 7px; | ||
+ | } | ||
+ | .cold-repressive .j { | ||
+ | stroke: red; | ||
+ | stroke-miterlimit: 10; | ||
+ | stroke-width: 7.63px; | ||
+ | stroke-dasharray: 4 16; | ||
+ | stroke-linecap:round; | ||
+ | fill:none; | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .i { | ||
+ | opacity:0; | ||
+ | fill: #ed1c24; | ||
+ | stroke: #ed1c24; | ||
+ | stroke-width: 4.39px; | ||
+ | transition: all 0.3s ease-out 0s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked .hydrogen-bond{ | ||
+ | opacity:0.3; | ||
+ | transition: all 0.3s linear 1s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked .i{ | ||
+ | opacity:0.35; | ||
+ | transition: all 0.3s ease-out 3s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked .j{ | ||
+ | opacity:1; | ||
+ | transition: all 0.3s ease-out 3s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked #RNAse_3{ | ||
+ | transform: translateX(0px); | ||
+ | opacity:1; | ||
+ | transition: all 1s ease-out 2s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked #ribosome_text{ | ||
+ | opacity:1; | ||
+ | transition: all 0.3s linear 2s; | ||
+ | } | ||
+ | .cold-repressive.svg_checked #loop{ | ||
+ | transform: translateY(0px); | ||
+ | } | ||
+ | .cold-repressive #left,#right{ | ||
+ | stroke-dasharray:130,500; | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .cold-repressive.svg_checked #left{ | ||
+ | stroke-dashoffset:0; | ||
+ | |||
+ | } | ||
+ | .cold-repressive.svg_checked #right{ | ||
+ | stroke-dashoffset:-277; | ||
+ | |||
+ | } | ||
+ | .cold-repressive.svg_checked #left_s,#right_s{ | ||
+ | stroke-dasharray:60,500; | ||
+ | color:black; | ||
+ | |||
+ | } | ||
+ | .cold-repressive.svg_checked #left_s{ | ||
+ | stroke-dashoffset:-130; | ||
+ | } | ||
+ | .cold-repressive.svg_checked #right_s{ | ||
+ | stroke-dashoffset:-217; | ||
+ | } | ||
+ | |||
+ | .cold-repressive .hydrogen-bond{ | ||
+ | opacity:0; | ||
+ | transition: all 0.3s linear 0s; | ||
+ | } | ||
+ | .cold-repressive #RNAse_3{ | ||
+ | transform: translateX(60px); | ||
+ | opacity:0; | ||
+ | transition: all 0.5s ease-out; | ||
+ | } | ||
+ | .cold-repressive #ribosome_text{ | ||
+ | opacity:0; | ||
+ | transition: all 0.5s ease-out 0s; | ||
+ | } | ||
+ | .cold-repressive #loop{ | ||
+ | transform: translateY(130px); | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .cold-repressive #left{ | ||
+ | stroke-dashoffset:-135; | ||
+ | stroke:red; | ||
+ | } | ||
+ | .cold-repressive #right{ | ||
+ | stroke-dashoffset:-142; | ||
+ | stroke:green; | ||
+ | } | ||
+ | .cold-repressive #left_s,#right_s{ | ||
+ | stroke-dasharray:60,500; | ||
+ | transition: all 2s ease-out; | ||
+ | } | ||
+ | .cold-repressive #left_s{ | ||
+ | stroke-dashoffset:-265; | ||
+ | } | ||
+ | .cold-repressive #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(429.01 165.45)">RNAse III</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_3"> | ||
+ | <path class="g" d="M405.71,98.59h-51a12,12,0,0,0-12,12V176.7L381.85,188l-39.14,11.29v16.31a12,12,0,0,0,12,12h51a12,12,0,0,0,12-12v-105A12,12,0,0,0,405.71,98.59Z"/> | ||
+ | <circle class="g" cx="362.29" cy="134.87" r="1"/> | ||
+ | </g> | ||
+ | <polyline class="j" points="342.65 178.9 301.01 178.9 301.01 227.5 247.66 227.5"/> | ||
+ | <path class="i" d="M362.41,134.87,236.66,163.09c-11-15.57-13-33.39,0-54.92l125.75,26.7"/> | ||
+ | </g> | ||
+ | </svg> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $("#checked_4").click(function(){ | ||
+ | if($(this).is(':checked')){ | ||
+ | $(".cold-repressive").addClass("svg_checked"); | ||
+ | }else{ | ||
+ | $(".cold-repressive").removeClass("svg_checked"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section class="ss3"> | ||
+ | </section> | ||
+ | <section class="ss4"> | ||
+ | </section> | ||
</html> | </html> | ||
+ | {{:Team:Jilin_China/Footer}} | ||
+ | {{:Team:Jilin_China/Home_Js}} |
Revision as of 14:50, 12 October 2018
Hot-induced 5'UTR