一个拟物化时间线组件,支持响应效果和深色主题,使用Tailwind CSS构建。无需JavaScript,仅需HTML和CSS。
<div class="container mx-auto px-4 py-8"> <!-- Skeuomorphic Timeline --> <div class="relative"> <!-- Vertical Line (mimics a physical line) --> <div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div> <!-- Timeline Items --> <div class="mb-8 flex justify-between items-center w-full right-timeline"> <div class="order-1 w-5/12"></div> <div class="order-1 w-5/12 px-1 py-4 text-right"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700"> <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3> <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <!-- Timeline Dot (mimics a physical marker) --> <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div> </div> <div class="mb-8 flex justify-between items-center w-full left-timeline"> <div class="order-1 w-5/12 px-1 py-4 text-left"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700"> <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3> <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <div class="order-1 w-5/12"></div> <!-- Timeline Dot (mimics a physical marker) --> <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div> </div> <div class="mb-8 flex justify-between items-center w-full right-timeline"> <div class="order-1 w-5/12"></div> <div class="order-1 w-5/12 px-1 py-4 text-right"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700"> <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3> <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <!-- Timeline Dot (mimics a physical marker) --> <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div> </div> <div class="mb-8 flex justify-between items-center w-full left-timeline"> <div class="order-1 w-5/12 px-1 py-4 text-left"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700"> <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3> <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <div class="order-1 w-5/12"></div> <!-- Timeline Dot (mimics a physical marker) --> <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div> </div> </div> </div> <style> /* Styles for a simple skeuomorphic look */ .left-timeline .bg-white, .right-timeline .bg-white { box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; } .dark .left-timeline .bg-gray-800, .dark .right-timeline .bg-gray-800 { box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e; } .left-timeline .bg-white.dark\:bg-gray-800, .right-timeline .bg-white.dark\:bg-gray-800 { border-color: #d1d5db; /* subtle light border */ } .dark .left-timeline .bg-white.dark\:bg-gray-800, .dark .right-timeline .bg-white.dark\:bg-gray-800 { border-color: #4b5563; /* subtle dark border */ } @media (max-width: 768px) { .left-timeline, .right-timeline { justify-content: flex-end; } .left-timeline .w-5/12, .right-timeline .w-5/12 { width: 100%; } .left-timeline .px-1, .right-timeline .px-1 { padding-left: 1rem; padding-right: 1rem; } .left-timeline .text-left, .right-timeline .text-right { text-align: left; } .left-timeline .order-1, .right-timeline .order-1 { order: 1; } .left-timeline .w-5/12:nth-child(1), .right-timeline .w-5/12:nth-child(1) { order: 2; } .left-timeline .rounded-full, .right-timeline .rounded-full { position: relative; left: auto; transform: none; margin-right: 1rem; } .border-r-4 { border-right-width: 0; border-left-width: 4px; left: 1rem; } } </style>
一个具有复古/怀旧设计和深色模式支持的响应式时间轴组件。
一个响应式时间轴组件,以极简/扁平设计风格用于电子商务,支持暗模式,采用类似色彩方案和多个互动元素。
一个响应式时间线组件,具有三色配色方案,以微交互为重点,适用于商业/企业网站,支持明暗模式。