Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

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

更新时间:2020-06-15 21:47:48

get.php
接口自行搞定哈,echo 一个地址链返回即可,初始  demo.mp4 自行配置

0