css3 틈새 없이 굴러가는 윤방도 실현

css3 틈새 없이 굴러가는 윤방도 실현
효과도
css3 애니메이션 지식 응용

애니메이션 이름 지정: animation-name: moveTest;

정의 애니메이션

@keyframes moveTest {
            0% {
                transform: translate(100px);
            }
            50% {
                transform: translate(100px, 200px);
            }
            100% {
                transform: translate(200px, 400px);
            }
        }

애니메이션 설정 총 소모 시간:animation-duration:2s;

애니메이션 재생 횟수 설정:animation-iteration-count:infinite;기본값은 1회이며, 숫자를 지정할 수 있으며, infinite는 무한순환

으로 지정할 수 있습니다.

애니메이션 교체 실행 설정:animation-direction:alternate;애니메이션 시작부터 끝까지 거꾸로 실행

애니메이션 지연 시간 설정:animation-delay:2s;

애니메이션 보존 상태 설정:animation-fill-mode:forwards;

애니메이션 시간 함수 설정:animation-timing-function:linear;등속, 변속

애니메이션의 재생 상태 설정:animation-play-state:running;paused 런닝 재생 일시 중지

전체 코드


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .window{
            width:1000px;
            height:138px;
            border:1px solid #eeeeee;
            margin:100px auto;
            overflow: hidden;
        }
        .images_list{
            width:2000px;
            height:138px;
            animation-name: move;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        img {
            float: left;
            width: 100px;
            height: 138px;
        }
        .images_list:hover{
            cursor:pointer;
            animation-play-state: paused;
        }

        @keyframes move{
            from{
                transform:translate(0px);
            }
            to{
                transform:translate(-1000px);
            }
        }
    style>
head>
<body>
<div class="window">
    <div class="images_list">
        <img src="./public/images/pk1.jpg" alt="">
        <img src="./public/images/pk2.jpg" alt="">
        <img src="./public/images/pk3.jpg" alt="">
        <img src="./public/images/pk4.jpg" alt="">
        <img src="./public/images/pk5.jpg" alt="">
        <img src="./public/images/pk6.jpg" alt="">
        <img src="./public/images/pk7.jpg" alt="">
        <img src="./public/images/pk8.jpg" alt="">
        <img src="./public/images/pk9.jpg" alt="">
        <img src="./public/images/pk10.jpg" alt="">
        <img src="./public/images/pk1.jpg" alt="">
        <img src="./public/images/pk2.jpg" alt="">
        <img src="./public/images/pk3.jpg" alt="">
        <img src="./public/images/pk4.jpg" alt="">
        <img src="./public/images/pk5.jpg" alt="">
        <img src="./public/images/pk6.jpg" alt="">
        <img src="./public/images/pk7.jpg" alt="">
        <img src="./public/images/pk8.jpg" alt="">
        <img src="./public/images/pk9.jpg" alt="">
        <img src="./public/images/pk10.jpg" alt="">
    div>

div>
body>
html>

css3 틈새 없이 굴러가는 윤방도 실현

좋은 웹페이지 즐겨찾기