|
|
| Line 378: |
Line 378: |
| | animation: timeliner 32s infinite; | | animation: timeliner 32s infinite; |
| | } | | } |
| − |
| |
| − | /* dots styles */
| |
| − | .dots_commands {
| |
| − | position: relative;
| |
| − | top: 32px;
| |
| − | padding:0; margin:0;
| |
| − | text-align:center;
| |
| − | }
| |
| − | .dots_commands li {
| |
| − | display:inline;
| |
| − | padding:0; margin:0;
| |
| − | list-style:none;
| |
| − | }
| |
| − | .dots_commands a {
| |
| − | position: relative;
| |
| − | display:inline-block;
| |
| − | height:8px; width: 8px;
| |
| − | margin: 0 5px;
| |
| − | text-indent: -9999px;
| |
| − | background: #fff;
| |
| − | border-bottom:0;
| |
| − |
| |
| − | -webkit-border-radius: 50%;
| |
| − | -moz-border-radius: 50%;
| |
| − | border-radius: 50%;
| |
| − |
| |
| − | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − | -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − | box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − |
| |
| − | z-index:25;
| |
| − | }
| |
| − | .dots_commands li + li a {
| |
| − | z-index:10;
| |
| − | }
| |
| − | @-moz-keyframes dotser {
| |
| − | 0%, 100% { opacity: 1; left: 0; }
| |
| − |
| |
| − | 20% { opacity: 1; left: 0; }
| |
| − | 22% { opacity: 0; left: 0; }
| |
| − | 23% { opacity: 0; left: 18px; }
| |
| − | 25% { opacity: 1; left: 18px; }
| |
| − |
| |
| − | 45% { opacity: 1; left: 18px; }
| |
| − | 47% { opacity: 0; left: 18px; }
| |
| − | 48% { opacity: 0; left: 36px; }
| |
| − | 50% { opacity: 1; left: 36px; }
| |
| − |
| |
| − | 70% { opacity: 1; left: 36px; }
| |
| − | 72% { opacity: 0; left: 36px; }
| |
| − | 73% { opacity: 0; left: 54px; }
| |
| − | 75% { opacity: 1; left: 54px; }
| |
| − |
| |
| − | 95% { opacity: 1; left: 54px; }
| |
| − | 97% { opacity: 0; left: 54px; }
| |
| − | 98% { opacity: 0; left: 0; }
| |
| − | }
| |
| − | @-webkit-keyframes dotser {
| |
| − | 0%, 100% { opacity: 1; left: 0; }
| |
| − |
| |
| − | 20% { opacity: 1; left: 0; }
| |
| − | 22% { opacity: 0; left: 0; }
| |
| − | 23% { opacity: 0; left: 18px; }
| |
| − | 25% { opacity: 1; left: 18px; }
| |
| − |
| |
| − | 45% { opacity: 1; left: 18px; }
| |
| − | 47% { opacity: 0; left: 18px; }
| |
| − | 48% { opacity: 0; left: 36px; }
| |
| − | 50% { opacity: 1; left: 36px; }
| |
| − |
| |
| − | 70% { opacity: 1; left: 36px; }
| |
| − | 72% { opacity: 0; left: 36px; }
| |
| − | 73% { opacity: 0; left: 54px; }
| |
| − | 75% { opacity: 1; left: 54px; }
| |
| − |
| |
| − | 95% { opacity: 1; left: 54px; }
| |
| − | 97% { opacity: 0; left: 54px; }
| |
| − | 98% { opacity: 0; left: 0; }
| |
| − | }
| |
| − | @keyframes dotser {
| |
| − | 0%, 100% { opacity: 1; left: 0; }
| |
| − |
| |
| − | 20% { opacity: 1; left: 0; }
| |
| − | 22% { opacity: 0; left: 0; }
| |
| − | 23% { opacity: 0; left: 18px; }
| |
| − | 25% { opacity: 1; left: 18px; }
| |
| − |
| |
| − | 45% { opacity: 1; left: 18px; }
| |
| − | 47% { opacity: 0; left: 18px; }
| |
| − | 48% { opacity: 0; left: 36px; }
| |
| − | 50% { opacity: 1; left: 36px; }
| |
| − |
| |
| − | 70% { opacity: 1; left: 36px; }
| |
| − | 72% { opacity: 0; left: 36px; }
| |
| − | 73% { opacity: 0; left: 54px; }
| |
| − | 75% { opacity: 1; left: 54px; }
| |
| − |
| |
| − | 95% { opacity: 1; left: 54px; }
| |
| − | 97% { opacity: 0; left: 54px; }
| |
| − | 98% { opacity: 0; left: 0; }
| |
| − | }
| |
| − | .dots_commands li:first-child a:after,
| |
| − | .dots_commands li:first-child a:before {
| |
| − | position: absolute;
| |
| − | top: 0; left: 0;
| |
| − | content: " ";
| |
| − | width: 8px; height: 8px;
| |
| − | background: #bd9b83;
| |
| − | z-index:20;
| |
| − | -webkit-border-radius: 50%;
| |
| − | -moz-border-radius: 50%;
| |
| − | border-radius: 50%;
| |
| − |
| |
| − | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − | -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − | box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
| |
| − | }
| |
| − | .dots_commands li:first-child a:after {
| |
| − | -webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
| |
| − | -moz-animation: dotser 32s infinite; /* thanks moz ! :D */
| |
| − | animation: dotser 32s infinite;
| |
| − | }
| |
| − | .dots_commands li:first-child a:before {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| Line 661: |
Line 534: |
| | <span id="timeline"></span> | | <span id="timeline"></span> |
| | | | |
| − | <ul class="dots_commands"><!-- | + | |
| − | --><li><a title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
| + | |
| − | --><li><a title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
| + | |
| − | --><li><a title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
| + | |
| − | --><li><a title="Show slide 4" href="#sl_i4">Slide 4</a></li>
| + | |
| − | </ul>
| + | |
| | | | |
| | </section> | | </section> |
