css实现自适应横竖时间线效果代码-html代码-BFW代码库

css实现自适应横竖时间线效果代码

代码语言：html

代码描述：css实现自适应横竖时间线效果代码，包含单点和文字详情介绍时间线。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        /**
         * timeline.css
         * @version 1.0.0
         * @summary 10-08-2021
         * @author Mads Stoumann
         * @description Stylesheet for timeline.
        */
        
        .tmln {
        	--bdc: hsl(200, 40%, 60%);
        	--bdc-a: hsl(200, 40%, 40%);
        	--bdc-h: hsl(200, 30%, 90%);
        	--bgc: hsl(200, 40%, 80%);
        	--bdrs: 0.25rem;
        	--bdw: 2px;
        	--bullet-bdrs: 50%;
        	--bullet-sz: 1.2em;
        	--bullet-sz-a: 6px;
        	--c: hsl(200, 40%, 1%);
        	--box-item-bdrs: 0.25rem;
        	--box-item-bgc: rgba(255, 255, 255, .15);
        	--box-item-dark-bgc: hsl(200, 40%, 40%);
        	--box-item-dark-c: hsl(200, 40%, 95%);
        	--box-item-lght-bgc: hsl(200, 30%, 90%);
        	--gap: 1rem;
        	--scroll-bgc: hsl(200, 40%, 85%);
        	--scroll-tmb-bgc: hsl(200, 40%, 70%);
        	--scroll-w: 10px;
        	--trsdu: .3s;
        	--trstf: ease-out;
        
        	/* Modifier-specific properties */
        	--sl-mbe: 2em;
        	--bi-miw: 85%;
        	--bi-miw-tablet: 30%;
        
        	background-color: var(--bgc, transparent);
        	border-radius: var(--bdrs, 0);
        	color: var(--c, currentColor);
        	font-family: var(--ff, ui-sans-serif, system-ui, sans-serif);
        	padding-block: var(--gap) 0;
        	padding-bottom: var(--gap); /* Safari */
        	padding-top: var(--gap); /* Safari */
        	width: var(--w, 100%);
        	-webkit-tap-highlight-color: transparent;
        }
        
        .tmln:not(.tmln--hr) {
        	padding-inline-start: var(--gap);
        }
        
        .tmln__header {
        	margin-block-start: 0;
        }
        
        .tmln__item {
        	color: inherit;
        	display: block;
        	margin-block-end: var(--mbe, var(--gap));
        	padding-inline-start: calc(var(--gap) + var(--bullet-sz));
        	position: relative;
        	text-decoration: none;
        }
        
        /* Circle */
        .tmln__item::after {
        	border: var(--bdw) solid var(--bdc);
        	border-radius: var(--bullet-bdrs);
        	box-sizing: border-box;
        	content: "";
        	block-size: var(--bullet-sz);
        	inline-size: var(--bullet-sz);
        	inset-block-start: 0;
        	inset-inline-start: 0;
        	position: absolute;
        	transition: all var(--trsdu) var(--trstf);
        }
        
        /* Line */
        .tmln__item::before {
        	background-color: var(--bdc);
        	content: "";
        	block-size: calc(100% + var(--mbe, var(--gap)) - var(--bullet-sz));
        	inline-size: var(--bdw);
        	inset-block-start: var(--bullet-sz);
        	inset-inline-start: calc((var(--bullet-sz) - var(--bdw)) / 2);
        	position: absolute;
        }
        
        /* Hide last line */
        .tmln:not(.tmln--hr) .tmln__item:last-child::before {
        	display: none;
        }
        
        .tmln__item-headline {
        	margin-block: 0;
        }
        
        .tmln__list {
        	display: flex;
        	flex-direction: column;
        	margin: 0;
        	padding-block: 0 var(--gap);
        	padding-inline: 0;
        }
        
        /* 
        .........完整代码请登录后点击上方下载按钮下载查看