抖音短视频源码php,一个简单漂亮的仿抖音网页端短视频播放源码(原创)

* {

margin:0px;

padding:0px;

touch-action:pan-y;

background-color:#161823;

}

.app {

width:650px;

height:640px;

position:absolute;

top:50px;

right:0px;

bottom:0px;

left:0px;

overflow:hidden;

margin:0 auto;

background-color:#0E0F1A;

}

.bom {

position:absolute;

top:730px;

right:0px;

bottom:0px;

left:0px;

overflow:hidden;

margin:0 auto;

font-size:12px;

}

#player {

width:348px;

height:600px;

margin-top:20px;

margin-bottom:20px;

margin-left:20px;

float:left;

z-index:100;

}

.box {

width:242px;

height:600px;

margin-top:20px;

margin-bottom:20px;

margin-left:20px;

background-color:#0E0F1A;

float:left;

font-size:12px;

}

.xhms {

-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;

-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;

box-shadow:inset 0px 1px 0px 0px #f5978e;

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f24537),color-stop(1,#c62d1f) );

background:-moz-linear-gradient( center top,#f24537 5%,#c62d1f 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537',endColorstr='#c62d1f');

background-color:#f24537;

-webkit-border-top-left-radius:5px;

-moz-border-radius-topleft:5px;

border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-moz-border-radius-topright:5px;

border-top-right-radius:5px;

-webkit-border-bottom-right-radius:5px;

-moz-border-radius-bottomright:5px;

border-bottom-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-moz-border-radius-bottomleft:5px;

border-bottom-left-radius:5px;

text-indent:0;

display:inline-block;

color:#ffffff;

font-family:arial;

font-size:15px;

font-weight:bold;

font-style:italic;

height:30px;

line-height:30px;

width:160px;

text-decoration:none;

text-align:center;

text-shadow:0px 1px 0px #810e05;

}

.xhms:hover {

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c62d1f),color-stop(1,#f24537) );

background:-moz-linear-gradient( center top,#c62d1f 5%,#f24537 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f',endColorstr='#f24537');

background-color:#c62d1f;

}

.xhms:active {

position:relative;

top:1px;

}

.zdlb {

-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;

-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;

box-shadow:inset 0px 1px 0px 0px #a4e271;

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#89c403),color-stop(1,#77a809) );

background:-moz-linear-gradient( center top,#89c403 5%,#77a809 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403',endColorstr='#77a809');

background-color:#89c403;

-webkit-border-top-left-radius:5px;

-moz-border-radius-topleft:5px;

border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-moz-border-radius-topright:5px;

border-top-right-radius:5px;

-webkit-border-bottom-right-radius:5px;

-moz-border-radius-bottomright:5px;

border-bottom-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-moz-border-radius-bottomleft:5px;

border-bottom-left-radius:5px;

text-indent:0;

display:inline-block;

color:#ffffff;

font-family:arial;

font-size:15px;

font-weight:bold;

font-style:italic;

height:30px;

line-height:30px;

width:160px;

text-decoration:none;

text-align:center;

text-shadow:0px 1px 0px #528009;

}

.zdlb:hover {

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#77a809),color-stop(1,#89c403) );

background:-moz-linear-gradient( center top,#77a809 5%,#89c403 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809',endColorstr='#89c403');

background-color:#77a809;

}

.zdlb:active {

position:relative;

top:1px;

}

.pass {

-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

box-shadow:inset 0px 1px 0px 0px #ffffff;

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );

background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');

background-color:#ededed;

-webkit-border-top-left-radius:5px;

-moz-border-radius-topleft:5px;

border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-moz-border-radius-topright:5px;

border-top-right-radius:5px;

-webkit-border-bottom-right-radius:5px;

-moz-border-radius-bottomright:5px;

border-bottom-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-moz-border-radius-bottomleft:5px;

border-bottom-left-radius:5px;

text-indent:0;

display:inline-block;

color:#777777;

font-family:arial;

font-size:40px;

font-weight:bold;

font-style:italic;

height:50px;

line-height:50px;

width:190px;

text-decoration:none;

text-align:center;

text-shadow:0px 1px 0px #ffffff;

}

.pass:hover {

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );

background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');

background-color:#dfdfdf;

}

.pass:active {

position:relative;

top:1px;

}