日本熟妇人妻中出,国产视频一视频二,日韩精品aaa

導讀網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎，也就是說萬維網(wǎng)是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

這篇文章給大家介紹的內(nèi)容是關于css3中animation屬性實現(xiàn)箭頭向右滾動漸隱的代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

這是一個右箭頭的小圖標。

keyframes 創(chuàng)建一個css3動畫用 animation 調(diào)用并用延遲動畫的辦法做出勻速滾動的效果。

直接貼上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>

當前位置:雨林木風下載站 > 網(wǎng)頁設計教程 > 詳細頁面

css3中animation屬性完成箭頭向右滾動漸隱的代碼

本類教程下載

系統(tǒng)下載排行