Difference between revisions of "Team:Tianjin/css/timeline"

Revision as of 11:19, 17 October 2018 (view source) 773715181 (Talk | contribs) ← Older edit		Latest revision as of 13:04, 17 October 2018 (view source) 773715181 (Talk | contribs)
Line 162:		Line 162:
	@media (max-width:600px) {		@media (max-width:600px) {
		+	.timeline-state{
		+	display: block;
		+	opacity: 1;
		+	visibility: visible;
		+	}
	.timeline-bar {		.timeline-bar {
	left:auto;		left:auto;

---

Latest revision as of 13:04, 17 October 2018

.timeline {

   margin-top: 0px;
   position:relative;
   width:100%;
   overflow:hidden;
   padding-bottom: 320px;
   padding-top: 100px;

} .timeline-center {

   left:0;
   right:0;
   margin-left:auto;
   margin-right:auto;

} .timeline-bar {

   position:absolute;
   width:3px;
   top:124px;
   bottom:200px;
   /*background-color:#FFD;
   */box-shadow:inset 0px 0px 7px -2px #000;

} .timeline-bar-fill {

   /*background-color:#00ff99;
   */position:absolute;
   left:0;
   right:0;
   top:0px;
   height:0;

} .timeline-state {

   position:relative;
   width:100%;
   min-height:200px;
   margin-bottom:10px;

} .timeline-state::after {

   display:block;
   content:' ';
   clear:both;

} .timeline-icon {

   border-radius:50%;
   width:24px;/*100*/
   height:24px;
   /*background-color:#F0F8FF;
   border:solid 3px #00ff99;
   box-shadow:0px 0px 19px -9px #000;*/
   background-image: url();
   background-repeat: no-repeat;
   background-size: 100%;
   position:absolute;
   top:12px;
   text-align:center;
   line-height:100px;
   font-size:40px;
   /*color:#000;
   */

} .timeline-state.timeline-animate .timeline-icon:nth-child(2n+2) {

   top: 132px;

} .timeline-content {

   width: 40%;
   float: left;
   opacity: 0;
   position: relative;
   margin-left: -40%;

} .timeline-image {

   opacity:0;
   width:40%;
   padding:2%;

} .timeline-state:nth-child(2n+1) .timeline-image {

   float:right;

} .timeline-image img {

   width:200px;
   height:200px;
   cursor:pointer;
   transition:all .6s;
   border-radius:50%;

} .timeline-image img:hover {

   transform:scale(1.1);

} .timeline-title {

   font-weight: normal;
   height: 50px;
   color: white;
   text-align: center;
   line-height: 50px;
   font-size: 30px;

} .timeline-state:nth-child(2n+1).timeline-animate .timeline-content:nth-child(2n+2){

   float: right;
   margin-right: 4%;
   position: relative;
   top: 120px;

} .timeline-state:nth-child(2n+2) .timeline-content:nth-child(2n+2) {

   float: right;
   margin-right: -40%;
   position: relative;
   top: 120px;

} .timeline-content,.timeline-image {

   -webkit-transition:all 500ms ease;
   -moz-transition:all 500ms ease;
   -o-transition:all 500ms ease;
   -ms-transition:all 500ms ease;
   transition:all 500ms ease;

} .timeline-bar-fill{

   -webkit-transition:all 2s ease;
   -moz-transition:all 2s ease;
   -o-transition:all 2s ease;
   -ms-transition:all 2s ease;
   transition:all 2s ease;   

} .timeline-state:nth-child(2n+2).timeline-animate .timeline-content {

   margin-right:4%;

} .timeline-animate .timeline-content {

   opacity:1;
   margin-left:4%;
   margin-right: 4%;

} .timeline-animate .timeline-image {

   opacity:1;
   text-align:center;

} .timeline-content p {

   word-wrap:break-word;

} .rightDay:after {

   border-left-color: #80c8eb;
   left: 100%;
   top: 25px;
   margin-top: -9px;

} .timeline-title:after {

   content: ;
   position: absolute;
   width: 0;
   height: 0;
   border: 8px solid transparent;
   /* top: 50%; */

} .timeline-text {

   text-align: justify;
   padding-left: 4%;
   padding-bottom: 40px;
   line-height: 30px;
   color: #818181;
   background: #e9faf9;
   padding-top: 30px;
   padding-right:4%;
   font-size: 18px;

}

@media (max-width:600px) {

  .timeline-state{
       display: block;
       opacity: 1;
       visibility: visible;
   }
  .timeline-bar {
   left:auto;
   right:30px;
   }
   .timeline-content {
       width:80%;
       float:none;
   }
   /*.timeline-state:nth-child(2n+2) .timeline-content {
       margin-right:0%;
       float:none;
   }*/
   .timeline-image {
       width:80%;
   }
   .timeline-state:nth-child(2n+1) .timeline-image {
       float:none;
   }
   .animate .timeline-content {
       margin-left:2%;
   }
   .timeline-icon {
       left:auto;
       right:0;
   }
   .timeline-icon {
           left: auto;
           right: 20px;
       }
   .timeline-state{
       margin-bottom: 240px;
   }
   .timeline-title:after{
       border:0;
   }
   .timeline-state:nth-child(2n+1).timeline-animate .timeline-content:nth-child(2n+2){
       float: none;
   }
   .timeline-state:nth-child(2n+2) .timeline-content:nth-child(2n+2){
       float: none;
   }
   .timeline-state.timeline-animate .timeline-icon:nth-child(2n+2){
       background: transparent;
   }

} /*day and night*/ .bodyDay {

   background-color:#81c6e6

} .MainDay {

   box-shadow:#49d9f1 0em 0em 2.1em 1.1em;
   border-bottom:1px solid #49d9f1;

} .barDay {

   background-color:#FFD

} .bgcDay {

   background-color:rgb(107,152,196);

} .timelineDay {

   background: -webkit-linear-gradient(#d3e0ee,#e9f1f9);
   background: -o-linear-gradient(#d3e0ee,#e9f1f9);
   background: -moz-linear-gradient(#d3e0ee,#e9f1f9);
   background: linear-gradient(#d3e0ee,#e9f1f9);

} .timelineNight {

   background: -webkit-linear-gradient(#495b77,#485a76);
   background: -o-linear-gradient(#495b77,#485a76);
   background: -moz-linear-gradient(#495b77,#485a76);
   background: linear-gradient(#495b77,#485a76);

} .contentDay{

   background-color: #80c8eb;

} .contentNight {

   background-color: #f19149;

} .rightDay:after {

   border-left-color: #80c8eb;
   left: 100%;
   top: 25px;
   margin-top: -9px;

} .rightNight:after {

   border-left-color: #f19149;
   left: 100%;
   top: 25px;
   margin-top: -9px;

} .leftNight:after {

   border-right-color: #8957a1;
   top: 25px;
   right: 100%;
   margin-top: -9px;

} .leftDay:after {

   border-right-color: #89c997;
   top: 25px;
   right: 100%;
   margin-top: -9px;

} /*

有一些问题在这下边，可能类加上去顺序有问题

• /

.timeline-title.left.titleNight.leftNight {

   background: #8957a1;

} .timeline-title.left.titleDay.leftDay {

   background: #89c997;

} .borderDay {

   border-color:#00ff99

} .iconDay {

   color:#000;
   background-color:#F0F8FF;

} .bodyNight {

   background-color:#6666cc;

} .MainNight {

   box-shadow:#6600cc 0em 0em 2.1em 0.1em;
   border-bottom:1px solid #6666cc;

} .barNight {

   background-color:#ccc;

} .bgcNight {

   background-color:rgb(107,152,196);

} .borderNight {

   border-color:#009ABB;

} .iconNight {

   color:#fff;
   background-color:#00313C;

} .buttonNight {

   position:relative;
   background:transparent;
   cursor:pointer;

} .buttonDay {

   position:relative;
   background:transparent;
   cursor:pointer;

}