집 > 기사 > 웹 프론트엔드 > CSS3의 애니메이션 속성은 화살표가 오른쪽으로 스크롤되어 사라지는 코드를 구현합니다.

CSS3의 애니메이션 속성은 화살표가 오른쪽으로 스크롤되어 사라지는 코드를 구현합니다.

不言원래의: 2018-08-10 11:42:563136검색

이 글에서는 오른쪽으로 스크롤하고 페이딩하는 화살표를 구현하기 위한 애니메이션 속성을 CSS3에서 구현하는 코드를 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 너.

오른쪽 화살표가 있는 작은 아이콘입니다.

keyframes 애니메이션 호출을 사용하여 CSS3 애니메이션을 만들고 지연된 애니메이션을 사용하여 균일한 스크롤 효과를 만듭니다.

html코드를 직접 붙여넣고 복사해서 실행해보세요.

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="webhivers" />
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">
<title>arrow-right</title> 
<style>
    .container { width: 1000px;margin: 0 auto; }
    @keyframes move { 
      0% {left: 0%;     opacity: 0; }
      70% { left: 70%; opacity: 1 }
      100% {left: 100%;opacity: 0;}
    }         
    .move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}
    .ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
    .ar-delay-1s{animation-delay:0.1s;}
    .ar-delay-2s{animation-delay:0.2s;}
    .ar-delay-3s{animation-delay:0.3s;}
    .ar-delay-4s{animation-delay:0.4s;}
    .ar-delay-5s{animation-delay:0.5s;}
    .ar-delay-6s{animation-delay:0.6s;}
    .ar-delay-7s{animation-delay:0.7s;}
    .ar-delay-8s{animation-delay:0.8s;}
    .ar-delay-9s{animation-delay:0.9s;}
    .ar-delay-10s{animation-delay:0.10s;}
     
</style>
 
 
</head>
 
<body>
 
<!-- Wrapper -->
<div> 
 
    <!-- Header -->
    <header id="header"></header>
    <!-- #Header end -->
 
 
    <!-- Content -->
    <section id="content">
 
        <div>
 
            <div>
 
                <!-- HTML CODE HERE -->
 
                <div>
                    <!-- <span class="move animated">>>>>>></span> -->
                    <span style="width:35px;display: block">
                        <!-- <i class="move animated delay-7s iconfont icon-arrow-right"></i>
                        <i class="move animated delay-6s iconfont icon-arrow-right"></i>
                        <i class="move animated delay-5s iconfont icon-arrow-right"></i> -->
                        <i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i>
                        <i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i>
                        <i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i>
                        <i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i>
                        <i class="move ar-animated iconfont icon-arrow-right"></i>
                    </span>
                </div>
 
            </div>
 
        </div>
 
    </section>
    <!-- #Content end --> 
 
 
    <!-- Footer -->
    <footer id="footer"></footer>
    <!-- #Footer end -->
 
 
</div>
<!-- #Wrapper end --> 
</body>
</html>

CSS3의 애니메이션 속성은 화살표가 오른쪽으로 스크롤되어 사라지는 코드를 구현합니다.

관련 기사