css3实现时间轴特效代码纯css实现大事记效果

响应式的兼容手机端，主要css3代码#timeline { list-style: none; margin: 50px 0 30px 120px; padding-left: 30px; border-left: 8px solid #eee9dc;}#timeline li { margin: 40px 0; position: relative;}#timeline p { margin: 0 0 15px;}.date { margin-top: -10px; top: 50%; left: -158px; font-size: 0.95em; line-height: 20px; position: absolute;}.circle { margin-top: -10px; top: 50%; left: -44px; width: 10px; height: 10px; background: #48b379; border: 5px solid #eee9dc; border-radius: 50%; display: block; position: absolute;}.content { max-height: 20px; padding: 50px 20px 0; border-color: transparent; border-width: 2px; border-style: solid; border-radius: 0.5em; position: relative;}.content:before, .content:after { content: ""; width: 0; height: 0; border: solid transparent; position: absolute; pointer-events: none; right: 100%;}.content:before { border-right-color: inherit; border-width: 20px; top: 50%; margin-top: -20px;}.content:after { border-right-color: #48b379; border-width: 17px; top: 50%; margin-top: -17px;}.content p { max-height: 0; color: transparent; text-align: justify; word-break: break-word; hyphens: auto; overflow: hidden;}label { font-size: 1.3em; position: absolute; z-index: 100; cursor: pointer; top: 20px; transition: transform 0.2s linear;}.radio { display: none;}.radio:checked + .relative label { cursor: auto; transform: translateX(42px);}.radio:checked + .relative .circle { background: #f98262;}.radio:checked ~ .content { max-height: 180px; border-color: #eee9dc; margin-right: 20px; transform: translateX(20px); transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;}.radio:checked ~ .content p { max-height: 200px; color: #eee9dc; transition: color 0.3s linear 0.3s;}

在线演示        积分下载        6毛下载        砍两刀下载