Line 35: | Line 35: | ||
background-color:rgb(51,51,51) !important; | background-color:rgb(51,51,51) !important; | ||
line-height:1; | line-height:1; | ||
+ | } | ||
+ | |||
+ | /*--------------side menu-----------------*/ | ||
+ | |||
+ | nav { | ||
+ | padding: 18px; | ||
+ | position: fixed; | ||
+ | height: auto; | ||
+ | left:0.5vw; | ||
+ | width: auto; | ||
+ | z-index: 9999; | ||
+ | top:25%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | nav .wrapper { | ||
+ | padding: 0; | ||
+ | width:100%; | ||
+ | height: 785px; | ||
+ | } | ||
+ | |||
+ | nav .nodes { | ||
+ | position: relative; | ||
+ | margin-top: 1px; | ||
+ | margin-left: 1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .line { | ||
+ | position: absolute; | ||
+ | width:1px; | ||
+ | height:705px; | ||
+ | top: 13px; | ||
+ | } | ||
+ | .line .red { | ||
+ | width:1px; /*調line長度*/ | ||
+ | height:47%; /*line寬度*/ | ||
+ | position:relative; | ||
+ | |||
+ | } | ||
+ | |||
+ | .line .blue { | ||
+ | width: 1px; /*line寬度*/ | ||
+ | height: 20%; /*調line長度*/ | ||
+ | position:relative; | ||
+ | left:51px; | ||
+ | |||
+ | } | ||
+ | .line .red-container { | ||
+ | position:relative; | ||
+ | width: 4px; | ||
+ | } | ||
+ | .line .red { | ||
+ | background-color:#00D6FF;/*cover line color*/ | ||
+ | *zoom: 1; | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | .line .blue { | ||
+ | background-color: white;/*line color*/ | ||
+ | *zoom: 1; | ||
+ | background-size: 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .node { | ||
+ | margin-left: 40px;/*調node間距*/ | ||
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | margin-top: 30px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .node .splash { | ||
+ | box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53); | ||
+ | transform: translateZ(0px) scale(1); | ||
+ | position: absolute; | ||
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | border-radius: 100%; | ||
+ | pointer-events: none; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .node.active .active-circle { | ||
+ | transform: scale(1); | ||
+ | opacity: 1; | ||
+ | background:white;/*active circle color*/ | ||
+ | left:1.6px; | ||
+ | } | ||
+ | .node.active .splash { | ||
+ | transition: transform 1200ms, opacity 1500ms; | ||
+ | transform: translateZ(0px) scale(2.5); | ||
+ | opacity: 0 !important; | ||
+ | |||
+ | } | ||
+ | .node.active .inactive-circle { | ||
+ | transition: opacity 200ms; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .node .active-circle { | ||
+ | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84); | ||
+ | transform: scale(0.7); | ||
+ | position: absolute; | ||
+ | opacity: 0; | ||
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | border-radius: 100%; | ||
+ | background-color: #4b1202; | ||
+ | *zoom: 1; | ||
+ | background-size: 100%; | ||
+ | |||
+ | } | ||
+ | .node .active-circle .cover { | ||
+ | transform: translateZ(0px); | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | background:#00D6FF;/*active circle color */ | ||
+ | border-radius: 100%; | ||
+ | position: absolute; | ||
+ | top: 2px; | ||
+ | left: 2px; | ||
+ | } | ||
+ | |||
+ | .node .inactive-circle { | ||
+ | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84); | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | display: block; | ||
+ | background: #000; | ||
+ | position: absolute; | ||
+ | border-radius: 100%; | ||
+ | border: 2px solid white; | ||
+ | top: 3px; | ||
+ | left: 3px; | ||
+ | } | ||
+ | .node:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .node:hover .active-circle { | ||
+ | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84); | ||
+ | transform: scale(0.84); | ||
+ | } | ||
+ | |||
+ | .node:hover .inactive-circle { | ||
+ | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84); | ||
+ | transform: scale(0.85); | ||
+ | } | ||
+ | |||
+ | /*left-topic*/ | ||
+ | |||
+ | .topic{ | ||
+ | position:relative; | ||
+ | margin-top:0vh !important; | ||
+ | width:200px; | ||
+ | height:auto; | ||
+ | left:210px; | ||
+ | float:right; | ||
+ | color:#F3F7F7; | ||
+ | } | ||
+ | .text_color{ | ||
+ | color:#F3F7F7; | ||
+ | font-size:12pt !important; | ||
} | } | ||
/*--------大圖----------*/ | /*--------大圖----------*/ | ||
Line 251: | Line 411: | ||
</div> | </div> | ||
+ | <nav id="scroll"> | ||
+ | <div class="wrapper"> | ||
+ | |||
+ | <div class="nodes"> | ||
+ | <div class="line"> | ||
+ | <div class="blue"> | ||
+ | <div class="red-container"> | ||
+ | <div class="red"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="node"> | ||
+ | <div class="topic"><p class="text_color">Software</p></div> | ||
+ | <div class="active-circle"> | ||
+ | <div class="splash"></div> | ||
+ | <div class="cover"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="inactive-circle"> | ||
+ | <div class="small-cover"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="node"> | ||
+ | <div class="topic"><p class="text_color">The Pest Prediction System</p></div> | ||
+ | <div class="active-circle"> | ||
+ | <div class="splash"></div> | ||
+ | <div class="cover"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="inactive-circle"> | ||
+ | <div class="small-cover"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="node"> | ||
+ | <div class="topic"><p class="text_color">User Study</p></div> | ||
+ | <div class="active-circle"> | ||
+ | <div class="splash"></div> | ||
+ | <div class="cover"> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div class="inactive-circle"> | ||
+ | <div class="small-cover"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </nav> | ||
+ | |||
<!--------------------wiki content--------------------------> | <!--------------------wiki content--------------------------> | ||
<section class="content_container"> | <section class="content_container"> |
Revision as of 13:39, 18 October 2016