响应式Html时间轴特效

2个月前 / 0 评论 / 2880 阅读 / 正在检测是否收录...

打算用在会员主题的微语功能上,重写部分功能,思路暂时还不够完善,代码先收藏
https://style.su1018.cn/7Nxakq20220316185401.png

HTML代码

<div class="row">
    <div class="col-lg-12">
        <div id="vertical-timeline" class="vertical-container light--timeline center-orientation">
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon bg-info btn-floating pulse">
                    <i class="fa fa-briefcase"></i>
                </div>
                <div class="vertical-timeline-content bg-boxshadow wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
                    <h5>Meeting</h5>
                    <p>Conference on the sales results for the previous year. Monica please examine sales trends in marketing and products. Below please find the current status of the sale. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem repellendus veniam hic totam ab exercitationem!</p>
                    <a href="#" class="btn- btn-sm btn-primary"> More info</a>
                    <span class="vertical-date">
                        Today <br>
                        <small>Dec 24</small>
                    </span>
                </div>
            </div>
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon bg-info btn-floating pulse">
                    <i class="fa fa-coffee"></i>
                </div>
                <div class="vertical-timeline-content bg-boxshadow wow fadeIn" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
                    <h5>Coffee Break</h5>
                    <p>Go to shop and find some products. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
                    <a href="#" class="btn- btn-sm btn-info text-white">Read more</a>
                    <span class="vertical-date"> Yesterday <br><small>Dec 23</small></span>
                </div>
            </div>
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon">
                    <i class="fa fa-phone"></i>
                </div>
                <div class="vertical-timeline-content bg-boxshadow wow fadeIn" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeIn;">
                    <h5>Phone with Jeronimo</h5>
                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
                    <span class="vertical-date">Yesterday <br><small>Dec 23</small></span>
                </div>
            </div>
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon bg-info btn-floating pulse">
                    <i class="fa fa-user-md"></i>
                </div>
                <div class="vertical-timeline-content bg-boxshadow wow fadeIn" data-wow-delay="1s" style="visibility: visible; animation-delay: 1s; animation-name: fadeIn;">
                    <h5>Go to the doctor dr Smith</h5>
                    <p class="mb-0">Find some issue and go to doctor. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
                    <span class="vertical-date">Yesterday <br><small>Dec 23</small></span>
                </div>
            </div>
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon navy-bg">
                    <i class="fa fa-comments"></i>
                </div>
                <div class="vertical-timeline-content bg-boxshadow wow fadeIn" data-wow-delay="1.2s" style="visibility: visible; animation-delay: 1.2s; animation-name: fadeIn;">
                    <h5>Chat with Monica and Sandra</h5>
                    <p class="mb-0">Web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p>
                    <span class="vertical-date">Yesterday <br><small>Dec 23</small></span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码

VIP尊享内容

白银会员可见开通会员
内容已隐藏

1 响应式Html时间轴特效

响应式Html时间轴特效

CSS样式 会员内容
2个月前 0 2881 22
1 非常漂亮的列表展示效果

非常漂亮的列表展示效果

CSS样式 付费内容 30
2个月前 0 1582 0
1 HTML会员卡片样式

HTML会员卡片样式

CSS样式 会员内容 # 会员卡片 # 会员样式
26天前 0 179 0

评论

取消