Difference between revisions of "Template:USTC-Software/css/timeline"

Revision as of 23:41, 19 October 2016 (view source) Avatarlei (Talk | contribs) ← Older edit		Latest revision as of 00:08, 20 October 2016 (view source) Avatarlei (Talk | contribs)
Line 12:		Line 12:
	main{		main{
−	height:1170vh;	+	height:1150vh;
	}		}
	section {		section {
Line 100:		Line 100:
	}		}
−	.section-right {	+	.section-right {F#
	right: 1%;		right: 1%;
	box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed;		box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed;
Line 154:		Line 154:
	position: absolute;		position: absolute;
	left: 50%;		left: 50%;
−	height: 1170vh;	+	height: 1150vh;
	transform: translateX(-50%);		transform: translateX(-50%);
	width: 5px;		width: 5px;

---

Latest revision as of 00:08, 20 October 2016

• {

   padding: 0;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;

}

body {

   position: relative;
   height: 100%;
   width: 100%;

}

main{

   height:1150vh;

} section {

   position: absolute;
   /*height: 60vh;*/
   width: 30%;
   padding:1rem;
   opacity: 0;
   /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/

}

/*section:hover {

   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);

}*/

section.section-right * {

   float: right;

}

section.section-right h2 {

   text-align:right;
   width:80%;

}

section h2 {

   margin: .5em;
   font-size: 1.8em;
   border-bottom: .1em solid black;

}

section p {

   width: 80%;
   margin: .5em;
   font-size: 1.2em;
   line-height: 1.5;

}

section img {

   width: 60%;
   margin-left: .5em;
   margin-right: .5em;

}

.bounce-in {

   transform: scale(1);
   opacity: 1;
   transition: all .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-delay: .1s;

}

section.section-left.bounce-in {

   left: 15%;

}

section.section-right.bounce-in {

   right: 15%;

}

.timeline.timeline-left {

   float: right;
   margin-right: 55%;

}

.timeline-right {

   float: left;
   margin-left: 55%;

}

.timeline {

   width: 0;
   height: 2px;
   padding:1rem;
   background-color: #999999;
   transform: translateY(calc(15vh - 5px));
   transition: all .3s ease-in-out;

}

.timeline-section {

   width: 100%;
   max-height: 55vh;
   background-color: #111111;

}

.section-left {

   left: 1%;
   box-shadow:0 3px 0 #d7e4ed,3px 0 3px #d7e4ed;

}

.section-right {F#

   right: 1%;
   box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed;

}

.section-right::after {

   content: ;
   position: absolute;
   top: calc(50% - 1rem);
   left: -1rem;
   border: 1rem solid transparent;
   border-right-width: 1rem;
   border-right-color: #03a9f4;
   border-left: 0;

}

.section-left::after {

   content: ;
   position: absolute;
   top: calc(50% - 1rem);
   right: -1rem;
   border: 1rem solid transparent;
   border-left-width: 1rem;
   border-left-color: #03a9f4;
   border-right: 0;

}

section.active .timeline {

   width: 40%;

}

section.active .round {

   opacity: 1;

}

.round {

   position: absolute;
   height: 6px;
   width: 6px;
   opacity: 0;
   border-radius: 50%;
   background: white;
   box-shadow: 0 0 0 6px #0288d1;
   left: calc(50% - 3px);

}

.round.bounce {

   opacity: 1;
   transition: all .2s ease-in-out;

}

1. timeline {

   position: absolute;
   left: 50%;
   height: 1150vh;
   transform: translateX(-50%);
   width: 5px;
   background-color: #03a9f4;

}

@keyframes cd-bounce-left {

   0% {
       left: 0;
       opacity: 0;
   }
   90% {
       left: 7%;
       opacity: 1;
   }
   100% {
       left: 5%;
       opacity: 1;
   }

}

@keyframes cd-bounce-right {

   0% {
       right: 0;
       opacity: 0;
   }
   90% {
       right: 7%;
       opacity: 1;
   }
   100% {
       right: 5%;
       opacity: 1;
   }

}