CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)-CSS 튜토리얼-php.cn

CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)

青灯夜游

풀어 주다： 2021-02-24 10:24:55

앞으로

3480명이 탐색했습니다.

이 글에서는 CSS3를 사용해 구현한 타임라인 효과를 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)

【추천 튜토리얼: CSS 동영상 튜토리얼】

최근 컴퓨터를 켜면 실용적인 경로 지도 페이지가 보입니다. 효과는 다음과 같습니다.

CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)

약간 비슷합니다. 타임라인이 있고, 그 위로 마우스를 가져갈 때마다 드롭다운 효과가 나타나며, 스크린샷 정보를 펼쳐서 소개하는 효과가 꽤 좋은 것 같습니다. 하지만 이 효과는 동적 추가에는 그다지 유연하지 않은 것 같습니다. 높이가 너비만큼 유연하지 않기 때문에 하나씩 추가해야 합니다. 그 중 상당수는 디스플레이 효과를 위해 만들어졌습니다.

물론, 이 아이디어를 바탕으로 좀 더 간단한 유사한 효과, 주로 전체 레이아웃 효과를 만들었고, 특정 콘텐츠 하나하나를 모방하지는 않을 것이며, 오프닝 애니메이션도 직접 추가하여 더욱 재미있게 만들었습니다. ..

먼저 효과를 살펴보겠습니다.

CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)

효과는 아마도 이렇습니다. 더 이상 고민하지 말고 바로 주제로 넘어가겠습니다.

HTML 구조:

<div class="timezone">
            <div class="time">
                <h2>2015-07-02</h2>
                <div>
                    <p>暴走大事件第一季</p>
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="timeLeft" style="top: 100px;">
                <h2>2015-07-02</h2>
                <div>
                    <p>暴走大事件第二季</p>
                    <ul>

                    </ul>
                </div>
</div>

로그인 후 복사

다음은 단순화된 HTML 구조입니다. , .time 클래스 오른쪽에 있다는 뜻이고, .timeLeft 는 왼쪽에 있다는 뜻이고 여백만 추가하면 각 블록의 내용이 삭제됩니다.

CSS 스타일 코드는 다음과 같습니다.

body{
                background: #333;
            }
            h1{
                text-align: center;
                color:#fff;
            }
            .timezone{
                width:6px;
                height: 350px;
                background: lightblue;
                margin: 0 auto;
                margin-top:50px;
                border-radius: 3px;
                position: relative;
                -webkit-animation: heightSlide 2s linear;
            }
            @-webkit-keyframes heightSlide{
                0%{
                    height: 0;
                }
                100%{
                    height: 350px;
                }
            }
            .timezone:after{
                content: &#39;未完待续...&#39;;
                width: 100px;
                color:#fff;
                position: absolute;
                margin-left: -35px;
                bottom: -30px;
                -webkit-animation: showIn 4s ease;
            }
            .timezone .time,.timezone .timeLeft{
                position: absolute;
                margin-left: -10px;
                margin-top:-10px;
                width:20px;
                height:20px;
                border-radius: 50%;
                border:4px solid rgba(255,255,255,0.5);
                background: lightblue;
                -webkit-transition: all 0.5s;
                -webkit-animation: showIn ease;
            }
            .timezone .time:nth-child(1){
                -webkit-animation-duration:1s;
            }
            .timezone .timeLeft:nth-child(2){
                -webkit-animation-duration:1.5s;
            }
            .timezone .time:nth-child(3){
                -webkit-animation-duration:2s;
            }
            .timezone .timeLeft:nth-child(4){
                -webkit-animation-duration:2.5s;
            }
            @-webkit-keyframes showIn{
                0%,70%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
            .timezone .time h2,.timezone .timeLeft h2{
                position: absolute;
                margin-left: -120px;
                margin-top: 3px;
                color:#eee;
                font-size: 14px;
                cursor:pointer;
                -webkit-animation: showIn 3s ease;
            }
            .timezone .timeLeft h2{
                margin-left: 60px;
                width: 100px;
            }
            .timezone .time:hover,.timezone .timeLeft:hover{
                border:4px solid lightblue;
                background: lemonchiffon;
                box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
            }
            .timezone .time div,.timezone .timeLeft div{
                position: absolute;
                top:50%;
                margin-top: -25px;
                left:50px;
                width: 300px;
                height: 50px;
                background: lightblue;
                border:3px solid #eee;
                border-radius: 10px;
                z-index: 2;
                overflow: hidden;
                cursor:pointer;
                -webkit-animation: showIn 3s ease;
                -webkit-transition: all 0.5s;
            }
            .timezone .timeLeft div{
                left:-337px;
            }
            .timezone .time div:hover,.timezone .timeLeft div:hover{
                height: 170px;
            }
            .timezone .time div p,.timezone .timeLeft div p{
                color: #fff;
                font-weight: bold;
                text-align: center;
            }
            .timezone .time:before,.timezone .timeLeft:before{
                content: &#39;&#39;;
                position: absolute;
                top:0px;
                left: 32px;
                width: 0px;
                height: 0px;
                border:10px solid transparent;
                border-right:10px solid #eee;
                z-index:-1;
                -webkit-animation: showIn 3s ease;
            }
            .timezone .timeLeft:before{
                left:-33px;
                border:10px solid transparent;
                border-left:10px solid #eee;
            }
            .timezone .time div ul,.timezone .timeLeft div ul{
                list-style: none;
                width:300px;
                padding:5px 0 0;
                border-top:2px solid #eee;
                color:#fff;
                text-align: center;
            }
            .timezone .time div li,.timezone .timeLeft div li{
                display: inline-block;
                height: 25px;
                line-height: 25px;
            }

로그인 후 복사

이 CSS 스타일 코드는 참고용일 뿐입니다. 별로 실용적이지 않고 정리되지 않았습니다. 중요한 것은 애니메이션 효과와 전체적인 레이아웃을 이해하는 것입니다. 최고의 소원!

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS3를 사용하여 간단한 타임라인 효과 얻기(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!