手寫保利威視小程序端css3跑馬燈特效,頁面防錄屏必須要的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous">

        <!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
            integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    </head>

    <body>
<div id="video">
    <video height="230" src="http://www.ahppea.com/wp-content/uploads/video/ahppeaAds.mkv" controls="" poster="http://www.ahppea.com/wp-content/themes/twentyeleven/images/postervedio.jpg" style="background: #000;"></video>
    <span id="light">13096549019</span>
</div>
<script>

</script>
    </body>
    <style>
        #video{ width: 383px; height: 230px;    position: relative;}
        span#light {
            pointer-events: none;
            position: absolute;
            top: 0;
            color: #ffb800;
            animation:mymove 100s linear infinite alternate;
        }
        
        @keyframes mymove{
            0%     {right:383px;top: 0;}
            10%   {right:0;top: 20px;}
            20%   {right:383px;top: 20px;}
            30%   {right:0;top: 40px;}
            40%   {right:383px;top:40px;}
            50%   {right:0;top: 60px;}
            60%   {right:383px;top: 60px;}
            70%   {right:0;top: 80px;}
            80%   {right:383px;top: 80px;}
            90%   {right:0;top: 100px;}
            100% {right:383px;top: 100px;}
        }
    </style>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章