Line 113: | Line 113: | ||
.scrollToTop{ | .scrollToTop{ | ||
position:fixed; | position:fixed; | ||
− | |||
− | |||
bottom:50px; | bottom:50px; | ||
border:3px solid #585858; | border:3px solid #585858; | ||
Line 122: | Line 120: | ||
height:45px; | height:45px; | ||
width:45px; | width:45px; | ||
− | font-size: | + | font-size:200px; |
display:none; | display:none; | ||
+ | box-shadow: 0 0 0 0 rgba(255,255,255,.1); | ||
+ | -webkit-animation: sdb03 5s infinite; | ||
+ | animation: sdb03 5s infinite; | ||
+ | opacity: 0; | ||
+ | box-sizing: border-box; | ||
} | } | ||
+ | @-webkit-keyframes sdb03 { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 30% { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 60% { | ||
+ | box-shadow: 0 0 0 60px rgba(255,255,255,.1); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | } | ||
+ | @keyframes sdb03 { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 30% { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 60% { | ||
+ | box-shadow: 0 0 0 60px rgba(255,255,255,.1); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
.scrollToTop:hover{ | .scrollToTop:hover{ | ||
text-decoration:none; | text-decoration:none; | ||
Line 173: | Line 210: | ||
<p>This is overview about Interlab.</p> | <p>This is overview about Interlab.</p> | ||
+ | <ul="pull right"> | ||
<a href="#" class="scrollToTop">⇧</a> | <a href="#" class="scrollToTop">⇧</a> | ||
+ | </ul> | ||
</div> | </div> | ||
Line 188: | Line 227: | ||
</ul> | </ul> | ||
− | + | <ul="pull right"> | |
<a href="#" class="scrollToTop">⇧</a> | <a href="#" class="scrollToTop">⇧</a> | ||
+ | </ul> | ||
</div> | </div> | ||
Line 197: | Line 237: | ||
<p>This is overview about Program.</p> | <p>This is overview about Program.</p> | ||
+ | <ul="pull right"> | ||
<a href="#" class="scrollToTop">⇧</a> | <a href="#" class="scrollToTop">⇧</a> | ||
+ | </ul> | ||
</div> | </div> | ||
Revision as of 06:52, 7 August 2017