CSS 타임라인 생성

7487 단어 codenewbie html css javascript

이것은 나의 첫 번째 게시물이며 모든 사람들이 댓글 섹션에서 이에 대해 댓글을 달아주는 것을 좋아할 것입니다.
예정된 계획으로 한 주를 시작하면 "계획에 실패하면 실패할 계획"이라는 말이 나옵니다. 계획을 세우면 반드시 성공합니다. CSS 타임라인 만들기

귀하의 웹사이트 또는 포트폴리오 페이지를 귀하의 성과에 대한 분석으로 활용하십시오.

CSS 타임라인용 코드 작성

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Timeline</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="intro">
      <div class="container">
        <h1>CSS Timeline</h1>
      </div>
    </section>
    <section class="timeline">
      <ul>
        <li>
          <div>
            <time>01:00</time>
            Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Donec odio. Quisque volutpat mattis eros. 
Nullam malesuada erat ut turpis. Suspendisse urna nibh, 
viverra non, semper suscipit, posuere a, pede.
          </div>
        </li>
        <li>
          <div>
            <time>03:00</time>
            Donec nec justo eget felis facilisis fermentum. 
Aliquam porttitor mauris sit amet orci. 
Aenean dignissim pellentesque felis.
          </div>
        </li>
        <li>
          <div>
            <time>03:30</time>
            Morbi in sem quis dui placerat ornare. 
Pellentesque odio nisi, euismod in, pharetra a, 
ultricies in, diam. Sed arcu. Cras consequat.
          </div>
        </li>
        <li>
          <div>
            <time>04:00</time>
            Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Donec odio. Quisque volutpat mattis eros. 
Nullam malesuada erat ut turpis. Suspendisse urna nibh, 
viverra non, semper suscipit, posuere a, pede.
          </div>
        </li>
        <li>
          <div>
            <time>05:00</time>
            Praesent dapibus, neque id cursus faucibus, 
tortor neque egestas auguae, 
eu vulputate magna eros eu erat. Aliquam erat volutpat. 
Nam dui mi, tincidunt quis, accumsan porttitor, 
facilisis luctus, metus.
          </div>
        </li>
        <li>
          <div>
            <time>05:40</time>
            Phasellus ultrices nulla quis nibh. Quisque a lectus. 
Donec consectetuer ligula vulputate sem tristique cursus. 
Nam nulla quam, gravida non, commodo a, sodales sit amet, 
nisi.
          </div>
        </li>
        <li>
          <div>
            <time>06:20</time>
            Phasellus ultrices nulla quis nibh. Quisque a lectus. 
Donec consectetuer ligula vulputate sem tristique cursus. 
Nam nulla quam, gravida non, commodo a, sodales sit amet, 
nisi.
          </div>
        </li>
        <li>
          <div>
            <time>07:00</time>
            Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Donec odio. Quisque volutpat mattis eros. 
Nullam malesuada erat ut turpis. Suspendisse urna nibh, 
viverra non, semper suscipit, posuere a, pede.
          </div>
        </li>
        <li>
          <div>
            <time>08:00</time>
            Praesent dapibus, neque id cursus faucibus, 
tortor neque egestas auguae, 
eu vulputate magna eros eu erat. Aliquam erat volutpat. 
Nam dui mi, tincidunt quis, accumsan porttitor, 
facilisis luctus, metus.
          </div>
        </li>
        <li>
          <div>
            <time>09:00</time>
            Donec nec justo eget felis facilisis fermentum. 
Aliquam porttitor mauris sit amet orci. 
Aenean dignissim pellentesque felis.
          </div>
        </li>
        <li>
          <div>
            <time>09:40</time>
            Donec nec justo eget felis facilisis fermentum. 
Aliquam porttitor mauris sit amet orci. 
Aenean dignissim pellentesque felis.
          </div>
        </li>
        <li>
          <div>
            <time>10:00</time>
            Morbi in sem quis dui placerat ornare. 
Pellentesque odio nisi, euismod in, pharetra a, 
ultricies in, diam. Sed arcu. Cras consequat.
          </div>
        </li>
      </ul>
    </section>
    <script src="index.js"></script>
</body>
</html>

CSS

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body 
{
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}  
.intro 
{
  background: #051336;
  padding: 100px 0;
}
.container 
{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
h1 
{
  font-size: 2.5rem;
}
.timeline ul 
{
  background: #1c1c29;
  padding: 50px 0;
}
.timeline ul li 
{
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}
.timeline ul li::after 
{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}
.timeline ul li div 
{
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(0.5px);
  box-shadow: 0 15px 15px 0 #17171f;
}
.timeline ul li div::before 
{
  content: '';
  position: absolute;
  top: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline ul li:nth-child(odd) div 
{
  left: 45px;
}
.timeline ul li:nth-child(odd) div::before 
{
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent rgba(255, 255, 255, 0.05) transparent transparent;
  box-shadow: 0 15px 15px 0 #17171f;
}
.timeline ul li:nth-child(even) div 
{
  left: -439px;
}
.timeline ul li:nth-child(even) div::before 
{
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.05);
}
time 
{
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.timeline ul li.in-view::after 
{
  background: rgba(255, 255, 255, 0.05);
}
.timeline ul li div 
{
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div 
{
  transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div 
{
  transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div 
{
  transform: none;
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 900px) 
{
  .timeline ul li div 
  {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div 
  {
    left: -289px;
  }
}
@media screen and (max-width: 600px) 
{
  .timeline ul li 
  {
    margin-left: 20px;
  }
  .timeline ul li div 
  {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div 
  {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before 
  {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}

전체 스크립트 참조 시계

읽어 주셔서 감사합니다.

Reference

이 문제에 관하여(CSS 타임라인 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ope79321153/creating-css-timeline-4ami

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

synchronized 키워드 설명

Ubuntu에 KH Coder 설치(2021)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다