jquery+sition实现支付手机端移动端左滑右滑切歌带歌词的播放器代码
代码语言：html
所属分类：多媒体
代码描述：jquery+sition实现支付手机端移动端左滑右滑切歌带歌词的播放器代码
代码标签： 手机 端 移动 端左 滑右 滑切 歌带 歌词 的 播放器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 背景css -->
<style>
body {
background-color: #02080f;
}
.stars-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(center ellipse, #061a33 0%, #000000 100%);
background: radial-gradient(ellipse at center, #061a33 0%, #000000 100%);
background-size: 110%;
background-position: 100% 100%;
overflow: hidden;
}
.title-wrapper {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.title-wrapper .title {
width: 31vw;
position: absolute;
text-align: justify;
top: 34.2vh;
left: 45vw;
right: 15%;
font-size: 5vw;
line-height: 1.3;
font-weight: normal;
margin: 0;
color: #fff;
color: #030f1d;
opacity: .8;
text-transform: uppercase;
letter-spacing: .1em;
}
.title-wrapper .title:after {
content: attr(data-title);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(325deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
background: linear-gradient(125deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 100%;
-webkit-background-clip: text;
overflow: hidden;
color: transparent;
}
.moon-wrapper {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.moon {
width: 14vw;
height: 14vw;
position: absolute;
top: 33vh;
left: 24vw;
border-radius: 50%;
background: #e7e1df 50% 50% no-repeat;
background-size: 102%;
box-shadow: 0px 0px 80px 0px rgba(183, 176, 130, 0.6), 0px 0px 350px 0px rgba(222, 221, 215, 0.3);
}
.moon:after {
content: "";
display: block;
position: absolute;
left: 5%;
top: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: transparent;
box-shadow: 0px 0px 150px 0px rgba(183, 176, 130, 0.1), 0px 0px 340px 0px rgba(222, 221, 215, 0.1);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.stars-cluster {
position: absolute;
left: 3%;
right: 3%;
top: 3%;
bottom: 3%;
}
.stars-cluster.stars-cluster-1 {
left: 20%;
right: 25%;
top: 20%;
bottom: 40%;
}
.stars-cluster.stars-cluster-1 .star-7,
.stars-cluster.stars-cluster-1 .star-22,
.stars-cluster.stars-cluster-1 .star-30 {
-webkit-animation: shooting-star 10s ease-out 1s forwards;
animation: shooting-star 10s ease-out 1s forwards;
}
.stars-cluster.stars-cluster-1 .star-22 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.stars-cluster.stars-cluster-1 .star-30 {
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.stars-cluster.stars-cluster-1 .star-20 {
-webkit-animation: shooting-star-2 8s ease-out 5s forwards infinite;
animation: shooting-star-2 8s ease-out 5s forwards infinite;
}
.stars-cluster.stars-cluster-2 .star-11,
.stars-cluster.stars-cluster-2 .star-16 {
-webkit-animation: shooting-star 10s ease-out 8s forwards;
animation: shooting-star 10s ease-out 8s forwards;
}
.stars-cluster.stars-cluster-2 .star-16 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars-cluster.stars-cluster-2 .star-7 {
-webkit-animation-delay: 9s;
animation-delay: 9s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.stars-cluster.stars-cluster-2 .star-4 {
-webkit-animation: shooting-star-2 11s ease-out 6s forwards infinite;
animation: shooting-star-2 11s ease-out 6s forwards infinite;
}
.star {
background-color: #f3f2d6;
border-radius: 50%;
position: absolute;
-webkit-animation-name: pulsate;
animation-name: pulsate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
/**
* ----------------------------------------
* star generator
* ---------------------------------------
*/
.stars-cluster-1 .star-1 {
width: 3px;
height: 3px;
opacity: 0.58538155;
top: 38.15727651%;
left: 22.25070759%;
-webkit-animation-duration: 2.00105257s;
animation-duration: 2.00105257s;
-webkit-animation-delay: 0.75991641s;
animation-delay: 0.75991641s;
}
.stars-cluster-1 .star-2 {
width: 1px;
height: 1px;
opacity: 0.51874459;
top: 17.91606576%;
left: 47.0479337%;
-webkit-animation-duration: 0.41815195s;
animation-duration: 0.41815195s;
-webkit-animation-delay: 0.98582734s;
animation-delay: 0.98582734s;
}
.stars-cluster-1 .star-3 {
width: 3px;
height: 3px;
opacity: 0.28994303;
top: 22.15215622%;
left: 3.05990623%;
-webkit-animation-duration: 2.32843759s;
animation-duration: 2.32843759s;
-webkit-animation-delay: 0.44073083s;
animation-delay: 0.44073083s;
}
.stars-cluster-1 .star-4 {
width: 2px;
height: 2px;
opacity: 0.21053665;
top: 32.23528154%;
left: 28.14530418%;
-webkit-animation-duration: 0.6369875s;
animation-duration: 0.6369875s;
-webkit-animation-delay: 0.86691446s;
animation-delay: 0.86691446s;
}
.stars-cluster-1 .star-5 {
width: 2px;
height: 2px;
opacity: 0.26247414;
top: 83.9202157%;
left: 68.47382858%;
-webkit-animation-duration: 1.6117763s;
animation-duration: 1.6117763s;
-webkit-animation-delay: 0.97376709s;
animation-delay: 0.97376709s;
}
.stars-cluster-1 .star-6 {
width: 3px;
height: 3px;
opacity: 0.77229373;
top: 49.61025927%;
left: 92.79107803%;
-webkit-animation-duration: 2.2912936s;
animation-duration: 2.2912936s;
-webkit-animation-delay: 0.57140768s;
animation-delay: 0.57140768s;
}
.stars-cluster-1 .star-7 {
width: 2px;
height: 2px;
opacity: 0.54869421;
top: 19.73430803%;
left: 84.23962574%;
-webkit-animation-duration: 0.64875593s;
animation-duration: 0.64875593s;
-webkit-animation-delay: 0.88255993s;
animation-delay: 0.88255993s;
}
.stars-cluster-1 .star-8 {
width: 2px;
height: 2px;
opacity: 0.33248085;
top: 67.50749333%;
left: 24.0864682%;
-webkit-animation-duration: 0.82725613s;
animation-duration: 0.82725613s;
-webkit-animation-delay: 0.25256893s;
animation-delay: 0.25256893s;
}
.stars-cluster-1 .star-9 {
width: 2px;
height: 2px;
opacity: 0.66955627;
top: 73.80246667%;
left: 3.38341221%;
-webkit-animation-duration: 0.41947977s;
animation-duration: 0.41947977s;
-webkit-animation-delay: 0.68994882s;
animation-delay: 0.68994882s;
}
.stars-cluster-1 .star-10 {
width: 2px;
height: 2px;
opacity: 0.29348586;
top: 59.85021719%;
left: 64.2333529%;
-webkit-animation-duration: 2.38044502s;
animation-duration: 2.38044502s;
-webkit-animation-delay: 0.79682409s;
animation-delay: 0.79682409s;
}
.stars-cluster-1 .star-11 {
width: 2px;
height: 2px;
opacity: 0.44634838;
top: 34.28912302%;
left: 82.7329746%;
-webkit-animation-duration: 1.91330973s;
animation-duration: 1.91330973s;
-webkit-animation-delay: 0.44937917s;
animation-delay: 0.44937917s;
}
.stars-cluster-1 .star-12 {
width: 2px;
height: 2px;
opacity: 0.77333216;
top: 75.42536624%;
left: 43.09377526%;
-webkit-animation-duration: 0.57065016s;
animation-duration: 0.57065016s;
-webkit-animation-delay: 0.81522398s;
animation-delay: 0.81522398s;
}
.stars-cluster-1 .star-13 {
width: 3px;
height: 3px;
opacity: 0.59869142;
top: 19.88572935%;
left: 53.89462411%;
-webkit-animation-duration: 1.67609094s;
animation-duration: 1.67609094s;
-webkit-animation-delay: 0.25142256s;
animation-delay: 0.25142256s;
}
.stars-cluster-1 .star-14 {
width: 2px;
height: 2px;
opacity: 0.77547573;
top: 44.61666881%;
left: 54.80605983%;
-webkit-animation-duration: 1.98446316s;
animation-duration: 1.98446316s;
-webkit-animation-delay: 0.82197803s;
animation-delay: 0.82197803s;
}
.stars-cluster-1 .star-15 {
width: 2px;
height: 2px;
opacity: 0.44857266;
top: 97.89845843%;
left: 0.68779218%;
-webkit-animation-duration: 2.07508004s;
animation-duration: 2.07508004s;
-webkit-animation-delay: 0.19611799s;
animation-delay: 0.19611799s;
}
.stars-cluster-1 .star-16 {
width: 2px;
height: 2px;
opacity: 0.36531183;
top: 5.17890076%;
left: 63.82393753%;
-webkit-animation-duration: 1.3229555s;
animation-duration: 1.3229555s;
-webkit-animation-delay: 0.25832456s;
animation-delay: 0.25832456s;
}
.stars-cluster-1 .star-17 {
width: 3px;
height: 3px;
opacity: 0.57051671;
top: 30.17851226%;
left: 29.1262961%;
-webkit-animation-duration: 0.63538241s;
animation-duration: 0.63538241s;
-webkit-animation-delay: 0.0919407s;
animation-delay: 0.0919407s;
}
.stars-cluster-1 .star-18 {
width: 3px;
height: 3px;
opacity: 0.295198;
top: 83.52756421%;
left: 25.13667024%;
-webkit-animation-duration: 1.10243399s;
animation-duration: 1.10243399s;
-webkit-animation-delay: 0.46310284s;
animation-delay: 0.46310284s;
}
.stars-cluster-1 .star-19 {
width: 1px;
height: 1px;
opacity: 0.21457849;
top: 77.13207898%;
left: 82.66601099%;
-webkit-animation-duration: 1.05814005s;
animation-duration: 1.05814005s;
-webkit-animation-delay: 0.05012952s;
animation-delay: 0.05012952s;
}
.stars-cluster-1 .star-20 {
width: 2px;
height: 2px;
opacity: 0.42646016;
top: 92.385347%;
left: 46.65974679%;
-webkit-animation-duration: 0.63324183s;
animation-duration: 0.63324183s;
-webkit-animation-delay: 0.34436607s;
animation-delay: 0.34436607s;
}
.stars-cluster-1 .star-21 {
width: 1px;
height: 1px;
opacity: 0.38711444;
top: 28.4985319%;
left: 8.15226028%;
-webkit-animation-duration: 1.51300259s;
animation-duration: 1.51300259s;
-webkit-animation-delay: 0.01952412s;
animation-delay: 0.01952412s;
}
.stars-cluster-1 .star-22 {
width: 1px;
height: 1px;
opacity: 0.51535225;
top: 66.43370129%;
left: 66.12047097%;
-webkit-animation-duration: 1.20317851s;
animation-duration: 1.20317851s;
-webkit-animation-delay: 0.88113828s;
animation-delay: 0.88113828s;
}
.stars-cluster-1 .star-23 {
width: 1px;
height: 1px;
opacity: 0.71429244;
top: 65.3373485%;
left: 13.99081878%;
-webkit-animation-duration: 0.58147328s;
animation-duration: 0.58147328s;
-webkit-animation-delay: 0.7165361s;
animation-delay: 0.7165361s;
}
.stars-cluster-1 .star-24 {
width: 1px;
height: 1px;
opacity: 0.67557817;
top: 87.69452807%;
left: 71.10428456%;
-webkit-animation-duration: 1.15684164s;
animation-duration: 1.15684164s;
-webkit-animation-delay: 0.87364508s;
animation-delay: 0.87364508s;
}
.stars-cluster-1 .star-25 {
width: 2px;
height: 2px;
opacity: 0.46594618;
top: 98.49686727%;
left: 10.47464893%;
-webkit-animation-duration: 2.08548763s;
animation-duration: 2.08548763s;
-webkit-animation-delay: 0.37207866s;
animation-delay: 0.37207866s;
}
.stars-cluster-1 .star-26 {
width: 3px;
height: 3px;
opacity: 0.3442723;
top: 77.82386648%;
left: 47.2950479%;
-webkit-animation-duration: 1.23049031s;
animation-duration: 1.23049031s;
-webkit-animation-delay: 0.30629827s;
animation-delay: 0.30629827s;
}
.stars-cluster-1 .star-27 {
width: 3px;
height: 3px;
opacity: 0.25267125;
top: 86.30067336%;
left: 71.51542264%;
-webkit-animation-duration: 1.48330857s;
animation-duration: 1.48330857s;
-webkit-animation-delay: 0.04000025s;
animation-delay: 0.04000025s;
}
.stars-cluster-1 .star-28 {
width: 2px;
height: 2px;
opacity: 0.58824315;
top: 23.07334342%;
left: 85.77116986%;
-webkit-animation-duration: 0.73330507s;
animation-duration: 0.73330507s;
-webkit-animation-delay: 0.43798716s;
animation-delay: 0.43798716s;
}
.stars-cluster-1 .star-29 {
width: 3px;
height: 3px;
opacity: 0.32561435;
top: 8.5316007%;
left: 26.54741085%;
-webkit-animation-duration: 1.62359414s;
animation-duration: 1.62359414s;
-webkit-animation-delay: 0.04052586s;
animation-delay: 0.04052586s;
}
.stars-cluster-1 .star-30 {
width: 2px;
height: 2px;
opacity: 0.7926184;
top.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0