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;
}
/*
====================
Modifiers and States
====================
*/
/* Active Circle */
.tmln__item--active::after {
--bdc: var(--bdc-a);
box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc-a);
background-color: var(--bdc-a);
}
/* :focus, :focus-within, :focus-visible */
.tmln__item--active:focus-visible::after,
.tmln__item--active:focus-within::after {
box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bdc-h, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}
.tmln__item--active [data-title],
.tmln__item:focus-visible [data-title] {
text-shadow: 0.75px 0px 0px currentColor;
}
.tmln__item:not(.tmln__item--active):focus-visible::after,
.tmln__item:not(.tmln__item--active):focus-within::after {
background-color: var(--bdc-h);
box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}
.tmln--box .tmln__item:focus-within {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.tmln__item:focus-visible {
outline: none;
}
.tmln__item:focus-visible [data-title],
.tmln__item:focus-within a {
outline: 1px dotted currentColor;
outline-offset: 6px;
}
/* Horizontal */
.tmln--hr .tmln__header {
margin-inline-start: var(--gap);
}
.tmln--hr .tmln__list {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
padding-block-start: var(--bullet-sz-a); /* Add room for box-shadow transition in horizontal mode */
padding-inline-start: var(--gap);
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.tmln--hr .tmln__item {
align-self: flex-start;
margin-block-end: 0;
min-width: var(--miw, 6rem);
padding-block-start: calc(var(--bullet-sz) + var(--gap));
padding-inline-end: var(--gap);
padding-inline-start: 0;
scroll-snap-align: start;
scroll-margin-inline-start: var(--gap);
scroll-margin-left: var(--gap); /* Safari */
}
.tmln--hr .tmln__item::before {
block-size: var(--bdw);
inline-size: calc(100% - var(--bullet-sz));
inset-block-start: calc((var(--bullet-sz) - var(--bdw)) / 2);
inset-inline-start: calc(0% + var(--bullet-sz));
}
/* Item Box */
.tmln--box .tmln__item {
background-color: var(--box-item-bgc);
border-radius: var(--box-item-bdrs);
margin-block-end: 0;
margin-inline-start: calc(var(--bullet-sz) + var(--gap));
padding: var(--gap);
transition: box-shadow var(--trsdu) var(--trstf);
}
.tmln--box .tmln__item [data-title] {
display: block;
font-size: small;
text-transform: uppercase;
}
.tmln--box:not(.tmln--hr) .tmln__item::after {
inset-inline-start: calc(0px - var(--bullet-sz) - var(--gap));
}
.tmln--box:not(.tmln--hr) .tmln__item::before {
inset-inline-start: calc(0px - var(--gap) - ((var(--bullet-sz) + var(--bdw)) / 2));
}
.tmln--box .tmln__item--bg-dark {
background-color: var(--box-item-dark-bgc);
color: var(--box-item-dark-c);
}
.tmln--box:not(.tmln--hr) .tmln__item--bg-dark a {
outline-color: var(--box-item-dark-bgc);
}
.tmln--box .tmln__item--bg-lght {
background-color: var(--box-item-lght-bgc);
}
.tmln--box .tmln__list {
gap: var(--gap);
padding-inline-end: var(--gap);
}
/* Item Box AND Horizontal */
.tmln--box.tmln--hr .tmln__item {
--miw: var(--bi-miw);
margin-block-end: 0;
margin-block-start: calc(var(--bullet-sz) + var(--gap));
margin-inline-start: 0;
}
.tmln--box.tmln--hr .tmln__item::after {
inset-block-start: calc(0px - var(--bullet-sz) - var(--gap));
}
.tmln--box.tmln--hr .tmln__item::before {
inset-block-start: calc(0px - var(--gap) - ((var(--bullet-sz) + var(--bdw)) / 2));
inline-size: calc(100% - var(--bullet-sz) + var(--gap));
}
/* Single Line, center text to bullet */
.tmln--sl .tmln__item {
--mbe: var(--sl-mbe, var(--gap));
line-height: var(--bullet-sz);
}
/* Media Queries */
/* :hover */
@media (hover: hover) {
.tmln__item--active:hover::after {
box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bdc-h, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}
.tmln__item:hover [data-title] {
text-shadow: 0.75px 0px 0px currentColor;
}
.tmln__item:not(.tmln__item--active):hover::after {
background-color: var(--bdc-h);
box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}
.tmln--box .tmln__item:hover {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}
}
@media (min-width: 768px) {
.tmln--box.tmln--hr .tmln__item {
--miw: var(--bi-miw-tablet);
}
}
/* Show scrollbars on devices without touch */
@media (pointer: fine) {
.tmln--hr {
/* Add space between scrollbar and bottom of container */
padding-block-end: var(--gap);
}
.tmln--hr .tmln__list {
scrollbar-width: var(--scroll-w);
}
.tmln--hr .tmln__list {
scrollbar-color: var(--scroll-tmb-bgc) var(--scroll-bgc);
scrollbar-width: thin;
}
.tmln--hr .tmln__list::-webkit-scrollbar {
background: var(--scroll-bgc);
height: var(--scroll-w);
width: var(--scroll-w);
}
.tmln--hr .tmln__list::-webkit-scrollbar-button {
background: var(--bgc);
}
.tmln--hr .tmln__list::-webkit-scrollbar-thumb {
/* Hide scrollbar-button-area, so scrollbar appears smaller than container */
background-color: var(--scroll-tmb-bgc);
}
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0