编程语言
首页 > 编程语言> > PHP实现获取本地视频进行随机播放

PHP实现获取本地视频进行随机播放

作者:互联网

创建一个文件夹,里面随便方视频文件即可

列如文件夹名字是assets代码如下

<?


$handler = opendir('./assets/mp4/');//当前目录中的文件夹下的文件夹     需要获取的目录文件夹名字
while( ($filename = readdir($handler)) !== false ) {
      if($filename != "." && $filename != ".."){
          //echo $filename."<br>";
          $tmp[] =  $filename;
      }
}
closedir($handler);
//print_r($tmp);

$arr=array_rand($tmp);
$video='./assets/mp4/'.$tmp[$arr];
header("location:$video");





?>

创建一个视频HTML小电视观看建议横屏视频


html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>便携小电视 | 小k</title>
    <!--为搜索引擎定义关键词-->
    <meta name="keywords" content="小k">
    <!--为网页定义描述内容 用于告诉搜索引擎,你网站的主要内容-->
    <meta name="description" content="便携小电视 | 小k"> 
    <!--定义网页作者-->
    <meta name="author" content="小k"> 
    <!--网站版权-->
    <meta name="copyright" content="小k">
    <!--指定IE和Chrome使用最新版本渲染当前页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--指导浏览器如何缓存某个响应以及缓存多长时间-->
    <!--no-cache:先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存
    no-store:不允许缓存,每次都要去服务器上,下载完整的响应(安全措施)
    public:缓存所有响应,但并非必须,因为max-age也可以做到相同效果
    private:只为单个用户缓存,因此不允许任何中继进行缓存,(比如说CDN就不允许缓存private的响应)
    maxage:当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求,例:max-age=60表示响应可以再缓存和重用60秒
    -->
    <meta http-equiv="cache-control" content="no-cache">
    <!--禁止百度自动转码 用于禁止当前页面在移动端浏览时,被百度自动转码,虽然百度的本意是好的,但是转码效果很多时候却不尽人意-->
    <!--meta http-equiv="Cache-Control" content="no-siteapp" /-->
    <!-- 分享网页时显示的标题-QQ-->
    <meta itemprop="name" content="便携小电视 | 小k" />
    <!-- 分享网页时显示的缩略图-QQ-->
    <meta itemprop="image" content="链接自己加" />
    <!--分享网页时时显示的内容-QQ-->
    <meta name="description" itemprop="description" content="便携小电视" />
    <!--设置自动适应电脑和手机屏幕--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no minimal-ui">
    <!--设置浏览器栏favicon图标-->
    <link rel="icon" href="图标自己加" type="image/x-icon"/>
    <!--定义搜索引擎爬虫的索引方式-->
    <!--index,follow:可以抓取本页,而且可以顺着本页继续索引别的链接
    noindex,follow:不许抓取本页,但是可以顺着本页抓取索引别的链接
    index,nofollow:可以抓取本页,但是不许顺着本页抓取索引别的链接
    noindex,nofollow:不许抓取本页,也不许顺着本页抓取索引别的链接
    -->
    <meta name="robots" content="index,follow">
    <!--引入css文件-->
    <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
    <link rel="stylesheet" href="./dms9qesqr9u.css">
    <!--引入js文件-->
    <!--script type="text/javascript" src="main.js"></script-->
    <!--js文件暂时不需要-->
</head>

<style type="text/css">
video::-webkit-media-controls{
    display:none !important;
}
    
    </style>

<body>

    <div class="centent">

        <div class="main">
            <!-- 电视区 -->
            <div class="ds">
                <!-- 电视边框 -->
                <div class="ds-wk" id="bg">
                    <!-- 电视视频显示区 -->
                    <!--视频-->
<div id="vid" class="m" style="display: none;"></div><!--状态-->

        <video id="video1" class="video" style="display: none;" poster="./assets/img/bg.gif">
          <source src="./api.php" type="video/mp4">
          <source src="./api.php" type="video/ogg">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </div>
                    <!-- 电视视频显示区 -->

                </div>
                <!-- 电视底部增加边框 -->
                <div class="ds-wk-btt">
                    <div class="ds-wk-btt-bz"></div>
                    <div class="ds-wk-btt-bz2"></div>
                </div>




                <!-- 遥控器区 -->
            <div class="yao">
                <div class="yao-an">
                    <!-- 开机 -->
                    <div class="yao-an-on" onclick="on()"><i class="iconfont icon-guanji"></i></div>
                    <!-- 关机 -->
                    <div class="yao-an-off" onclick="off()"><i class="iconfont icon-guanji"></i></div>
                </div>

                <!-- 音量加 -->
                <div class="yao-an-yl">
                    <div class="yao-an-yl-jia" onclick="setHalfVolume()"><i class="iconfont icon-yinliangjia"></i></div>
                </div>




                <!-- 换台 -->
                <div class="yao-an-ht">
                    <!-- 换台左 -->
                    <div class="yao-an-ht-zuo" onclick="ht()"><i class="iconfont icon-ziyuan1"></i></div>

                    <!-- 暂停和播放 -->
                    <div class="yao-an-ht-you" onclick="playPause()"><i id="zt" class="iconfont icon-jixu"></i></div>

                    <!-- 换台右 -->
                    <div id="ht" class="yao-an-ht-you" onclick="ht()"><i class="iconfont icon-you"></i></div>
                </div>




                
                
                
                <!-- 音量减 -->
                <div class="yao-an-yl">
                    <div class="yao-an-yl-jian" onclick="setFullVolume()"><i class="iconfont icon-yinliangjian"></i></div>
                </div>
            
            

            </div>
            <!-- 遥控器区 -->

            <!-- 底部版权 -->
            <div class="footer">
                <div class="Copyright">© 2021 <a href="https://cnblogs.com/xkboi" > 小k</a>. All rights reserved.</div>
            </div>
        </div>
</div>





<!-- 换台 -->
<script>
function ht(){
    var vidz =document.getElementById('vid').className;
    if (vidz == "m") {
        alert("请先开机");
    }
    else{
        var vidz = document.getElementById('video1').src = './api.php';
        document.getElementById("video1").play();
        zt.className = "iconfont icon-zantingtingzhi";
    }          
}
</script>








<!-- 自动播放下一个视频 -->

<script>


    var elevideo = document.getElementById("video1");
    elevideo.addEventListener('ended', function () { //结束
console.log("播放结束");
var vidz = document.getElementById('video1').src = './api.php';
                document.getElementById("video1").play();
                zt.className = "iconfont icon-zantingtingzhi";
}, false);




</script>




<!-- 

<button onclick="playPause()">播放</button> 
                    <button onclick="makeBig()">暂停</button>

                    <button onclick="setHalfVolume()" type="button">音量加</button>

              <button onclick="setFullVolume()" type="button">音量减</button> -->


    



























<!-- 开机 -->
<script>
    function on(){
    document.getElementById('video1').style.display='block'; 
    var vidz = document.getElementById('vid').className = 'k';
                
}
</script>
<!-- 关机 -->
<script>
    function off(){
    document.getElementById('video1').style.display='none';  
    var vidz = document.getElementById('vid').className = 'm';
    myVideo.pause();
    zt.className = "iconfont icon-jixu";
}
</script>







      <!-- 设置播放与暂停 -->
      <script> 
        var myVideo=document.getElementById("video1"); 
        /* var o =document.getElementById("video1").style.display; */
        

        function playPause()
        {
            var vidz =document.getElementById('vid').className;
            if (vidz == "m") {
                alert("请先开机");
            }
            else{
                /* 播放 */
                if (myVideo.paused)
                {
                    myVideo.play();
                    zt.className = "iconfont icon-zantingtingzhi";
                }
                else
                {/* 暂停 */
                    myVideo.pause();
                    zt.className = "iconfont icon-jixu";
                }
            }
            
            
        } 
        </script>  


    <!-- 设置音量加减 -->
    <script>
        myVid=document.getElementById("video1");
        myVid.volume=0.2;
        function setHalfVolume()
        {
            var yl=myVid.volume+0.01
            myVid.volume=yl;
        } 
        function setFullVolume()
        {
            var yl=myVid.volume-0.01
            myVid.volume=yl;
        }
    </script> 








</body>
</html>

这个css代码如下


点我展开
 *{
    margin: 0;
    padding: 0;
}


.centent{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div{
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-user-select: none;
	-moz-user-focus: none;
    -moz-user-select: none;
}

.main{
    width: 100%;
    max-width: 960px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.ds{
    width: 100%;
    height: auto;
   /*  background: chocolate; */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.ds-wk{
    width: 50%;
    height: 250px;
    background: #000000;
    border:2px solid #1f1e1e;
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.video{
    width: 100%;
    height: 100%;
    object-fit:fill;
}

.ds-wk-btt{
    width: 100%;
    height: auto;
    /* /* background: #1f1e1e; */
    /* border:2px solid #1f1e1e;  */
    color: #ffffff;
    display: flex;

        /* justify-content: center;
        align-items: center; */
        justify-content: center;


}

.ds-wk-btt-bz{
    width: 5px;
    height: 20px;
    background: #1f1e1e;
    border-radius: 10px 0px 10px 0px; 
	transform: rotate(40deg);
    margin-top: -4px;
    margin-right: 80px;
}
.ds-wk-btt-bz2{
    width: 5px;
    height: 20px;
    background: #1f1e1e;
    border-radius: 0px 10px 0px 10px; 
	transform: rotate(-40deg);
    margin-top: -4px; 
    margin-left: 80px;
}
































/* 遥控器区 */
.yao{
    width: 100%;
    height: 50%;
    /* background: coral; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.yao-an{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.yao-an-on{
    width: 50px;
    height: 50px;
    background: rgb(76, 175, 80);
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.3);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yao-an-on:hover{
    background: rgb(66, 153, 69);
}
.yao-an-on>i{
    font-size: 18px;
    color: #ffffff;
}

.yao-an-off{
    width: 50px;
    height: 50px;
    background: rgb(226, 12, 12);
    /* box-shadow:0px 5px 15px #a5a4a4; */
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.3);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yao-an-off:hover{
    background: rgb(196, 10, 10);
}
.yao-an-off>i{
    font-size: 18px;
    color: #ffffff;
}




/* 音量加*/
.yao-an-yl{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
}
.yao-an-yl-jia{
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    /* box-shadow:0px 5px 15px #a5a4a4; */
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.yao-an-yl-jia:hover{
    background: rgb(192, 189, 189);
}
.yao-an-yl-jia>i{
    font-size: 18px;
    color: #333232;
}





/* 换台 */

.yao-an-ht{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 左 */
.yao-an-ht-zuo{
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    /* box-shadow:0px 5px 15px #a5a4a4; */
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yao-an-ht-zuo:hover{
    background: rgb(192, 189, 189);
}
.yao-an-ht-zuo>i{
    font-size: 18px;
    color: #333232;
}

/* 右 */
.yao-an-ht-you{
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    /* box-shadow:0px 5px 15px #a5a4a4; */
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yao-an-ht-you:hover{
    background: rgb(192, 189, 189);
}
.yao-an-ht-you>i{
    font-size: 18px;
    color: #333232;
}















/* 音量减*/
.yao-an-yl{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
}
.yao-an-yl-jian{
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    /* box-shadow:0px 5px 15px #a5a4a4; */
    box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
    cursor: pointer;
    border-radius: 360px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.yao-an-yl-jian:hover{
    background: rgb(192, 189, 189);
}
.yao-an-yl-jian>i{
    font-size: 18px;
    color: #333232;
}








/* 底部版权 */
.footer{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.Copyright{
    font-size: 13px;

}
.Copyright>a{
    text-decoration: none;
    color: #03a9f4;

}































/* 动画区 */
/* 达到850分辨率改变 */
@media screen and (max-width:850px) {
    .yao-an{
        width: 40%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .yao-an-ht{
        width: 40%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .ds-wk{
        width: 60%;
        height: 250px;
        background: #000000;
        border:2px solid #1f1e1e;
        margin-top: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}

/* 达到700分辨率改变 */
@media screen and (max-width:700px) {
    .yao-an{
        width: 40%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .yao-an-ht{
        width: 45%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .ds-wk{
        width: 80%;
        height: 250px;
        background: #000000;
        border:2px solid #1f1e1e;
        margin-top: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}



/* 达到530分辨率改变 */
@media screen and (max-width:530px) {
    .yao-an{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .yao-an-ht{
        width: 55%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .ds-wk{
        width: 95%;
        height: 200px;
        background: #000000;
        border:2px solid #1f1e1e;
        margin-top: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}




/* 达到400分辨率改变 */
@media screen and (max-width:400px) {
    .yao-an{
        width: 70%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .yao-an-ht{
        width: 75%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .ds-wk{
        width: 95%;
        height: 200px;
        background: #000000;
        border:2px solid #1f1e1e;
        margin-top: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}



/* 达到300分辨率改变 */
@media screen and (max-width:300px) {
    .yao-an{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .yao-an-ht{
        width: 90%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .yao-an-yl{
        width: 50%;
        height: auto;
        display: flex;
        justify-content: center;
    }
    .ds-wk{
        width: 95%;
        height: 200px;
        background: #000000;
        border:2px solid #1f1e1e;
        margin-top: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}

 


这个css代码如下

字体下载地址https://wwn.lanzout.com/ipaQw07swwni


点我展开
 @font-face {
  font-family: "iconfont"; /* Project id 1092713 */
  src: url('字体自己加') format('woff2'),
       url('字体自己加') format('woff'),
       url('字体自己加') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jixu:before {
  content: "\e68b";
}

.icon-zantingtingzhi:before {
  content: "\e6c4";
}

.icon-zantingtingzhi1:before {
  content: "\e63c";
}

.icon-ziyuan1:before {
  content: "\e636";
}

.icon-yinliangjia:before {
  content: "\e637";
}

.icon-yinliangjian:before {
  content: "\e639";
}

.icon-you:before {
  content: "\e7e0";
}

.icon-guanji:before {
  content: "\e687";
}

.icon-gengduo1:before {
  content: "\e62b";
}

.icon-gengduo2:before {
  content: "\e62d";
}

.icon-gengduo3:before {
  content: "\e630";
}

.icon-gengduo4:before {
  content: "\e657";
}

.icon-gengduobeifen:before {
  content: "\e633";
}

.icon-gengduo5:before {
  content: "\e634";
}

.icon-gengduo:before {
  content: "\e629";
}

.icon-yanjing:before {
  content: "\e6af";
}

.icon-icon-arrow-bottom2:before {
  content: "\e668";
}

.icon-xinlangweibo:before {
  content: "\e627";
}

.icon-wode3:before {
  content: "\e628";
}

.icon-wangluo1:before {
  content: "\e626";
}

.icon-huiyuan2:before {
  content: "\e8c5";
}

.icon-qq:before {
  content: "\e625";
}

.icon-huiyuan:before {
  content: "\e624";
}

.icon-dingwei:before {
  content: "\e6ad";
}

.icon-bi:before {
  content: "\e623";
}

.icon-qianming:before {
  content: "\e69f";
}

.icon-txt:before {
  content: "\e615";
}

.icon-mp:before {
  content: "\e61d";
}

.icon-zip:before {
  content: "\e65b";
}

.icon-yasuobao:before {
  content: "\e61e";
}

.icon-txt1:before {
  content: "\e66c";
}

.icon-MP:before {
  content: "\e61f";
}

.icon-f-mp4:before {
  content: "\e620";
}

.icon-exe:before {
  content: "\e622";
}

.icon-apk:before {
  content: "\e643";
}

.icon-MP3:before {
  content: "\e644";
}

.icon-zip-1:before {
  content: "\e7ac";
}

.icon-xinjiantianjiabiaodanyemian:before {
  content: "\e7aa";
}

.icon-shuaxin:before {
  content: "\e65a";
}

.icon-shangchuan:before {
  content: "\e67a";
}

.icon-wenjianjia:before {
  content: "\e7a7";
}

.icon-icon-test:before {
  content: "\e613";
}

.icon-fenxiang2:before {
  content: "\e6a7";
}

.icon-ziyuan:before {
  content: "\e611";
}

.icon-tuichu:before {
  content: "\e612";
}

.icon-shanchu:before {
  content: "\e6cd";
}

.icon-icon7:before {
  content: "\e667";
}

.icon-quanbu-copy:before {
  content: "\e64f";
}

.icon-tongji:before {
  content: "\e64a";
}

.icon-shezhi1:before {
  content: "\e63b";
}

.icon-tongji1:before {
  content: "\e610";
}

.icon-mimaffffffpx:before {
  content: "\e60d";
}

.icon-chenggong:before {
  content: "\e666";
}

.icon-unie737:before {
  content: "\e61b";
}

.icon-yijianyufankui:before {
  content: "\e642";
}

.icon-tishi:before {
  content: "\e718";
}

.icon-tongzhi1:before {
  content: "\e614";
}

.icon-guaduan:before {
  content: "\e616";
}

.icon-hanhan-01-011:before {
  content: "\e694";
}

.icon-gouwu:before {
  content: "\e7ed";
}

.icon-tupian:before {
  content: "\e747";
}

.icon-aislogo:before {
  content: "\e607";
}

.icon-diannao:before {
  content: "\e632";
}

.icon-zhinengpinghengkongzhi:before {
  content: "\e60a";
}

.icon-xiaolian:before {
  content: "\e688";
}

.icon-wangluo:before {
  content: "\e870";
}

.icon-radio-off:before {
  content: "\ea6b";
}

.icon-yuyin:before {
  content: "\e6c1";
}

.icon-shandian:before {
  content: "\e65c";
}

.icon-hanhan-01-01:before {
  content: "\e67c";
}

.icon-weibo:before {
  content: "\e619";
}

.icon-bilibili-fill1:before {
  content: "\e62a";
}

.icon-youjian:before {
  content: "\e6db";
}

.icon-zuanshi1:before {
  content: "\e714";
}

.icon-pingmu-screen:before {
  content: "\e62f";
}

.icon-dengluyonghu:before {
  content: "\e609";
}

.icon-bilibili-fill:before {
  content: "\e93e";
}

.icon-zan:before {
  content: "\e672";
}

.icon-cai:before {
  content: "\e635";
}

.icon-cai1:before {
  content: "\e68f";
}

.icon-zan1:before {
  content: "\e601";
}

.icon-kongjian:before {
  content: "\e618";
}

.icon-iconset0239:before {
  content: "\e68a";
}

.icon-xiangji:before {
  content: "\e631";
}

.icon-lianjie:before {
  content: "\e60c";
}

.icon-lianjie-copy:before {
  content: "\e7df";
}

.icon-mima:before {
  content: "\e63a";
}

.icon-wode1:before {
  content: "\e602";
}

.icon-bianpinghuatubiaosheji-:before {
  content: "\e62e";
}

.icon-bianpinghuatubiaosheji-1:before {
  content: "\e638";
}

.icon-tongzhi:before {
  content: "\e6e5";
}

.icon-agenda_view:before {
  content: "\e7dc";
}

.icon-agenda_view_outlined:before {
  content: "\e7dd";
}

.icon-iconfontfanhui2-copy:before {
  content: "\e760";
}

.icon-iconfontfanhui2:before {
  content: "\e621";
}

.icon-qianbao:before {
  content: "\e722";
}

.icon-homepage1:before {
  content: "\e617";
}

.icon-homepage_fill:before {
  content: "\e60b";
}

.icon-wode:before {
  content: "\e6a2";
}

.icon-weidenglu:before {
  content: "\e6a3";
}

.icon-wode-copy:before {
  content: "\e7de";
}

.icon-integral_fillx:before {
  content: "\e75f";
}

.icon-integral:before {
  content: "\e60f";
}

.icon-biz-appstore-o:before {
  content: "\e600";
}

.icon-biz-appstore:before {
  content: "\e605";
}

.icon-gongdan:before {
  content: "\e6a4";
}

.icon-gongdan1:before {
  content: "\e6a5";
}

.icon-tubiaozhizuomoban-:before {
  content: "\e62c";
}

.icon-wendang2:before {
  content: "\e606";
}

.icon-homepage:before {
  content: "\e603";
}

.icon-zuanshi:before {
  content: "\e604";
}

.icon-wo:before {
  content: "\e735";
}

.icon-fenxiang:before {
  content: "\e608";
}

.icon-xuansucai:before {
  content: "\e69d";
}

.icon-xinxi:before {
  content: "\e641";
}

.icon-fenxiang1:before {
  content: "\e648";
}

.icon-shuju:before {
  content: "\e61a";
}

.icon-shezhi:before {
  content: "\e61c";
}

.icon-vip:before {
  content: "\e659";
}

.icon-fuzhi:before {
  content: "\e742";
}

.icon-shoucang:before {
  content: "\e653";
}

.icon-wd:before {
  content: "\e60e";
}

.icon-shoucang1:before {
  content: "\e65d";
}

所用到的缩略图如下


对应的名称按顺序如下

666.gif

bg.gif

bg.png

bg2.jpg

可在html代码中快速查找关键词随后添加

部分图片暂不需要添加看自己所需

不需要的=添加的图片已经删除了是搜不到的

 

标签:flex,播放,icon,content,width,随机,PHP,display,before
来源: https://www.cnblogs.com/xkboi/p/16476225.html