CSS3는 간단한 캐러셀 차트를 구현합니다.-HTML 튜토리얼-php.cn

CSS3는 간단한 캐러셀 차트를 구현합니다.

WBOY

풀어 주다： 2016-08-31 08:41:50

원래의

2024명이 탐색했습니다.

CSS3 애니메이션을 사용하여 이미지 전환 효과를 얻으려면 왼쪽 값을 변경하는 것이 원칙입니다. 전환 후 짧은 시간 동안 멈추고 첫 번째 사진을 마지막 위치까지 복제하여 원활한 전환을 달성하는 가장 간단한 자동 재생 기능만 있습니다.

html 구조

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pic"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01627.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01628.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC02637.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01627.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 克隆第一张 </span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

CSS 스타일

<span style="color: #800000;">　　　　　*</span>{<span style="color: #ff0000;"> 
             margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
             padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> 
             text-decoration</span>:<span style="color: #0000ff;"> none</span>;
         }<span style="color: #800000;">
        ul</span>{<span style="color: #ff0000;">
            list-style</span>:<span style="color: #0000ff;"> none</span>;
        }<span style="color: #800000;">
        
        #container</span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
            overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">隐藏溢出的图片</span><span style="color: #008000;">*/</span>
        }<span style="color: #800000;">
        .pic</span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">1600px</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">4张图的宽度</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">基于父容器进行定位</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
            animation-name</span>:<span style="color: #0000ff;"> focusmap</span>;<span style="color: #ff0000;">
            animation-duration</span>:<span style="color: #0000ff;"> 12s</span>;<span style="color: #ff0000;">
            animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;//<span style="color: #008000;">动画调用可以简写</span>

        }<span style="color: #800000;">
         @keyframes focusmap </span>{<span style="color: #ff0000;">
            0%,30%{
                left</span>:<span style="color: #0000ff;"> 0</span>;
            }<span style="color: #800000;">
            35%,65%</span>{<span style="color: #ff0000;">
                left</span>:<span style="color: #0000ff;"> -400px</span>;
            }<span style="color: #800000;">
            70%,99%</span>{<span style="color: #ff0000;">
                left</span>:<span style="color: #0000ff;"> -800px</span>;
            }<span style="color: #800000;">
            100%</span>{<span style="color: #ff0000;">
                left</span>:<span style="color: #0000ff;"> -1200px</span>;
            }<span style="color: #800000;">
           
        }
        .pic li</span>{<span style="color: #ff0000;">
            float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #5dd94e</span>;
        }<span style="color: #800000;">

        .pic li img </span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 200px</span>;
        }

로그인 후 복사