-
-
无论最终的结果是什么，只要这是自己选择的道路。——龙与虎
-
不管是哪个时代，都不缺少精力过剩的家伙。——威廉·克梅修
-
想不想像上面那样把自己的句子放到漂亮的对话框中呢？
不多说，上代码
`css`
```
body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06);
}
ul.cbp_tmtimeline {
padding:0;
}
div class.cdp_tmlabel > li .cbp_tmlabel {
margin-bottom:0;
}
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
4px;
background: RGBA(0, 0, 0, 0.02);
left: 80px;
margin-left: 10px;
}
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
max-70px;
position: absolute;
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #9BCD9B;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75);
}
div.cbp_tmlabel > p {
margin-bottom:0;
}
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 120px;
background: #9BCD9B;
color: #fff;
padding: 1.5em;
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
transition: all 0.3s ease 0s;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
cursor:pointer;
}
.cbp_tmlabel:hover {
transform: translateY(-3px);
z-index: 1;
-webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: RGBA(255, 125, 73, 0.75);
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
0;
position: absolute;
pointer-events: none;
border-right-color: #9BCD9B;
border- 10px;
top: 4px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: RGBA(255, 125, 73, 0.75);
}
@media screen and (max- 65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
}
}
@media screen and (max- 47.2em) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline > li .cbp_tmtime {
100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline > li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 30px 0;
padding: 1em;
font-weight: 400;
font-size: 95%;
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: auto;
left: 20px;
border-right-color: transparent;
border-bottom-color: #9BCD9B;
top: -20px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: RGBA(255, 125, 73, 0.75);
}
.cbp_tmtimeline > li .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: -55px 5px 0 0px;
}
}
```
上传好css代码后调用方式如下：
```
```