Difference between revisions of "Team:Jilin China/home"
| Line 390: | Line 390: | ||
</div> | </div> | ||
<div class="stem-loop"> | <div class="stem-loop"> | ||
| + | |||
| + | <input id="checked_3" type="checkbox" class="switch" /> | ||
| + | |||
| + | <svg class="cold-induced" xmlns="http://www.w3.org/2000/svg" width="354.12" height="206.26" 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: 86% 0%; | ||
| + | } | ||
| + | .r2{ | ||
| + | transform-origin: 14% 100%; | ||
| + | } | ||
| + | .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> | ||
<div class="stem-loop"> | <div class="stem-loop"> | ||
Revision as of 07:11, 3 October 2018
Hot-induced 5'UTR