css实现一个大气动感交互式音乐播放器UI效果代码
代码语言：html
所属分类：多媒体
代码描述：css实现一个大气动感交互式音乐播放器UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Nunito:600");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
* {
box-sizing: border-box;
}
body {
background: #cbded8;
margin: 0;
overflow: hidden;
}
.b_overlay {
position: fixed;
background: rgba(69, 195, 155, 0.64);
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
}
.bar {
background: white;
position: fixed;
bottom: -50px;
-webkit-animation: up 300ms 500ms forwards;
animation: up 300ms 500ms forwards;
width: 100%;
height: 48px;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
font-weight: 600;
font-family: "Nunito", sans-serif;
font-size: 14px;
z-index: 2;
}
.bar_inner__left {
float: left;
}
.bar_inner__left .brand {
background: #45c39b;
position: relative;
padding: 15px;
display: inline-block;
margin-right: -4px;
transition: all 300ms;
}
.bar_inner__left .brand a {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.bar_inner__left .brand img {
width: 40px;
position: relative;
top: 2px;
}
.bar_inner__left .brand:hover {
background: #35a07e;
}
.bar_inner__left .selection {
position: relative;
display: inline-block;
background: white;
border-right: 1px solid #e6e6e6;
padding: 15px 20px 18px 20px;
cursor: pointer;
font-weight: 600;
color: #5d6265;
min-width: 340px;
position: relative;
top: -1px;
transition: background 300ms, border 300ms;
}
.bar_inner__left .selection:hover {
background: #eceff3;
border-right: 1px solid #d9dfe7;
}
.bar_inner__left .selection .fa-codepen {
margin-right: 8px;
font-size: 15px;
}
.bar_inner__left .selection .fa-chevron-up {
font-size: 10px;
opacity: 0.4;
position: relative;
top: 4px;
margin-left: 8px;
float: right;
transition: all 200ms;
transform-origin: 5px 6px;
}
.bar_inner__left .selection_list {
position: absolute;
background: #eceff3;
border-bottom: 0;
opacity: 0;
bottom: -250px;
width: 100%;
max-height: 165px;
z-index: -1;
border-bottom: 1px solid #dce2e9;
transition: bottom 200ms, opacity 200ms;
left: 0;
overflow: scroll;
}
.bar_inner__left .selection_list::-webkit-scrollbar {
width: 3px;
background-color: #F5F5F5;
}
.bar_inner__left .selection_list::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
.bar_inner__left .selection_list a {
display: block;
text-decoration: none;
padding: 15px;
position: relative;
overflow: hidden;
transition: all 300ms;
color: #5d6265;
}
.bar_inner__left .selection_list a i {
position: absolute;
opacity: 0;
right: -40px;
transition: right 300ms, opacity 300ms;
font-size: 10px;
top: 20px;
}
.bar_inner__left .selection_list a:hover {
background: #dfe4eb;
text-indent: 10px;
color: #309292;
}
.bar_inner__left .selection_list a:hover i {
opacity: 1;
right: 20px;
}
.bar_inner__left p {
margin: 0;
display: inline-block;
margin-left: 14px;
}
.bar_inner__left p i {
color: red;
font-size: 10px;
}
.bar_inner__right {
float: right;
color: white;
}
.bar_inner__right i {
margin-right: 10px;
}
.bar_inner__right .youtube {
background: #e22424;
display: inline-block;
margin-left: -4px;
padding: 16px 19px 17px 19px;
transition: all 300ms;
cursor: pointer;
position: relative;
}
.bar_inner__right .youtube i.fa-chevron-right {
margin-left: 10px;
font-size: 10px;
position: absolute;
right: -100px;
opacity: 0;
transition: all 300ms;
top: 20px;
}
.bar_inner__right .youtube i.fa-play {
font-size: 12px;
}
.bar_inner__right .youtube .v_preview {
background: #e22424;
width: 102%;
transition: all 300ms;
position: absolute;
height: 150px;
left: 0;
top: 0;
z-index: -1;
}
.bar_inner__right .youtube:hover {
background: #cc1b1b;
padding: 16px 29px 17px 19px;
}
.bar_inner__right .youtube:hover i.fa-chevron-right {
right: 0;
opacity: 1;
}
.bar_inner__right .youtube:hover .v_preview {
top: -150px;
}
.bar_inner__right .tweet {
display: inline-block;
color: #1da1f2;
padding: 16px 20px 17px 20px;
transition: all 300ms;
cursor: pointer;
position: relative;
margin-left: -4px;
}
.bar_inner__right .tweet a {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.bar_inner__right .tweet:hover {
background: #0d92e3;
color: white;
}
.bar_inner__right .codepen {
display: inline-block;
color: #5d6265;
border-right: 1px solid #e6e6e6;
padding: 16px 20px 17px 20px;
transition: all 300ms;
cursor: pointer;
position: relative;
}
.bar_inner__right .codepen a {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.bar_inner__right .codepen:hover {
background: #1a1b1f;
color: white;
}
.owl .left-eye,
.owl .right-eye {
border-radius: 50%;
display: block;
position: absolute;
width: 15px;
height: 15px;
bottom: 71px;
z-index: 2;
}
.owl .left-pupil,
.owl .right-pupil {
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
display: block;
transform: translateY(0px);
position: absolute;
-webkit-animation: blink 3s infinite;
animation: blink 3s infinite;
}
.owl {
width: 100px;
position: absolute;
right: 60px;
bottom: -140px;
-webkit-animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
transition: all 1s;
z-index: 1;
}
.owl .left-eye {
right: 63px;
}
.owl .right-eye {
right: 23px;
}
.owl .love {
opacity: 0;
position: absolute;
bottom: 50px;
right: 94px;
transition: all 0.2s 0.2s;
width: 70px;
}
._video_id,
._pen_id,
._pen_title {
display: none;
}
@media (max-width: 900px) {
.bar_inner__left, .bar_inner__right {
width: 50%;
}
.bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
width: 20%;
text-align: center;
}
.bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
margin: 0;
}
.bar_inner__left .youtube, .bar_inner__right .youtube {
width: 60%;
left: 4px;
}
.bar_inner__left span, .bar_inner__right span {
display: none;
}
.bar_inner__left .brand {
z-index: 1;
}
.bar_inner__left .selection {
padding-left: 90px;
left: 0;
position: absolute;
top: 1px;
width: 50%;
}
}
@media (max-width: 764px) {
.bar_inner__left, .bar_inner__right {
width: 100%;
}
.bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
width: 20%;
display: none;
border: none;
text-align: center;
}
.bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
margin: 0;
}
.bar_inner__left .youtube, .bar_inner__right .youtube {
width: 60%;
display: none;
left: 4px;
}
.bar_inner__left span, .bar_inner__right span {
display: none;
}
.bar_inner__left .brand {
z-index: 1;
}
.bar_inner__left .selection {
padding-left: 90px;
left: 0;
border: none !important;
position: absolute;
top: 1px;
width: 100%;
}
}
@-webkit-keyframes up {
0% {
bottom: -50px;
}
100% {
bottom: 0;
}
}
@keyframes up {
0% {
bottom: -50px;
}
100% {
bottom: 0;
}
}
@-webkit-keyframes owl {
0% {
bottom: -140px;
}
100% {
bottom: 10px;
}
}
@keyframes owl {
0% {
bottom: -140px;
}
100% {
bottom: 10px;
}
}
@-webkit-keyframes owl_bob {
0% {
bottom: 10px;
}
50% {
bottom: 14px;
}
100% {
bottom: 10px;
}
}
@keyframes owl_bob {
0% {
bottom: 10px;
}
50% {
bottom: 14px;
}
100% {
bottom: 10px;
}
}
@-webkit-keyframes blink {
0% {
height: 8px;
transform: translateY(0px);
}
46% {
height: 8px;
transform: translateY(0px);
}
50% {
height: 0px;
transform: translateY(4px);
}
54% {
height: 8px;
transform: translateY(0px);
}
100% {
height: 8px;
transform: translateY(0px);
}
}
@keyframes blink {
0% {
height: 8px;
transform: translateY(0px);
}
46% {
height: 8px;
transform: translateY(0px);
}
50% {
height: 0px;
transform: translateY(4px);
}
54% {
height: 8px;
transform: translateY(0px);
}
100% {
height: 8px;
transform: translateY(0px);
}
}
.shadow_right {
width: 90px;
height: 380px;
transition: all 300ms 200ms;
top: 0px;
position: absolute;
pointer-events: none;
box-shadow: 0px 0px 0px #303f45 inset;
}
i {
transition: all 0.3s;
cursor: pointer;
}
i:hover {
color: #44f5b7;
}
.shadow_left {
width: 90px;
height: 380px;
transition: all 300ms 200ms;
top: 0px;
position: absolute;
right: 0;
pointer-events: none;
box-shadow: 0px 0px 0px #303f45 inset;
}
.r_trim {
width: 260px;
height: 660px;
position: absolute;
left: 380px;
z-index: 2;
right: 0;
top: -82px;
margin: auto;
background: #4cb892;
}
.l_trim {
width: 260px;
height: 660px;
position: absolute;
z-index: 2;
left: -640px;
right: 0;
top: -33px;
margin: auto;
background: #4cb892;
}
body {
font-family: "Open Sans", sans-serif;
background: #4cb892;
}
body .player_inner__middle .cube, body .player_inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
body .player_inner__middle .cube_inner > div {
width: 380px;
height: 380px;
background: pink;
position: absolute;
transform-style: preserve-3D;
}
body .player_inner {
background: #3a4e47;
width: 380px;
height: 640px;
border-radius: 6px;
perspective: 800px;
}
body .player_inner__top {
height: 70px;
padding: 24px;
background: url("//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png");
background-size: 103% !important;
margin-bottom: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
body .player_inner__top i,
body .player_inner__top h1 {
position: relative;
color: white;
font-weight: 600;
}
body .player_inner__top .t_left {
width: 25%;
float: left;
}
body .player_inner__top .t_mid {
float: left;
text-align: center;
width: 50%;
}
body .player_inner__top .t_mid h1 {
margin: 0;
font-size: 12px;
}
body .player_inner__top .t_right {
float: right;
width: 25%;
text-align: right;
}
body .player_inner__middle {
position: relative;
height: 380px;
background: #40555f;
box-shadow: 0px 0px 110px #181f23 inset;
}
body .player_inner__middle .empty {
display: none;
}
body .player_inner__middle input {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent !important;
outline: none;
transition: all 0.3s;
width: 60px !important;
height: 50px !important;
line-height: 16px;
}
body .player_inner__middle input:hover {
background: #00000061 !important;
}
body .player_inner__middle input:hover:after {
color: #44f5b7 !important;
}
body .player_inner__middle input:nth-of-type(1) {
width: 130px !important;
top: 40px;
height: 320px !important;
}
body .player_inner__middle input:nth-of-type(1):hover {
background: none !important;
}
body .player_inner__middle input:nth-of-type(1)::after {
font-family: "Open Sans", sans-serif, "fontawesome";
content: " Now Playing";
display: block;
left: 0 !important;
color: white;
font-size: 13px;
cursor: pointer;
}
body .player_inner__middle input:nth-of-type(2) {
display: none;
}
body .player_inner__middle input:nth-of-type(2)::after {
font-family: "fontawesome";
content: "";
display: block;
color: white;
font-size: 18px;
cursor: pointer;
}
body .player_inner__middle input:nth-of-type(3) {
BORDER-TOP-LEFT-RADIUS: 50PX;
border-bottom-left-radius: 50px;
}
body .player_inner__middle input:nth-of-type(3)::after {
font-family: "fontawesome";
content: "";
display: block;
color: white;
font-size: 18px;
cursor: pointer;
}
body .player_inner__middle input:nth-of-type(3):checked {
opacity: 0;
right: -50px;
box-shadow: 0px 0px 0px 100px #00000061;
pointer-events: none;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div > .cube_inner > .cube_inner__right i {
opacity: 1;
top: 8px;
transition: all 0.3s 0.3s;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div + div + div + div {
display: block;
box-shadow: 60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div + div + div + div + div {
display: block;
box-shadow: -60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(4) {
BORDER-TOP-right-RADIUS: 50PX;
border-bottom-right-radius: 50px;
}
body .player_inner__middle input:nth-of-type(4)::after {
font-family: "fontawesome";
content: "";
display: block;
color: white;
font-size: 18px;
cursor: pointer;
left: 4px;
}
body .player_inner__middle input:nth-of-type(4):checked {
opacity: 0;
left: -50px;
pointer-events: none;
box-shadow: 0px 0px 0px 100px #00000061;
}
body .player_inner__middle input:nth-of-type(4):checked + input + div + div + div + div {
display: block;
box-shadow: 60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(4):checked + input + div + div + div + div + div {
display: block;
box-shadow: -60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle .trigger--4, body .player_inner__middle .trigger--3, body .player_inner__middle .trigger--2, body .player_inner__middle .trigger--1 {
background: black;
width: 20px;
cursor: pointer;
height: 400px;
position: absolute;
z-index: 2;
margin: auto;
text-align: center;
}
body .player_inner__middle .trigger--4::after, body .player_inner__middle .trigger--3::after, body .player_inner__middle .trigger--2::after, body .player_inner__middle .trigger--1::after {
position: relative;
top: 18px;
left: -6px;
transition: all 0.3s;
}
body .player_inner__middle .trigger--1 {
left: 0px;
right: auto;
top: 0;
bottom: 0;
width: 20px;
height: 40px;
}
body .player_inner__middle .trigger--1:checked + input + .cube {
transform: translateY(-50%) rotateX(0) rotateY(30deg);
transform-origin: 200px 0px -200px;
transition: transform 300ms 200ms, transform-origin 0s;
}
body .player_inner__middle .trigger--2 {
left: auto;
right: 0px;
top: 0;
bottom: 0;
width: 20px;
height: 40px;
}
body .player_inner__middle .trigger--2:checked + input + input + .cube {
transform: translateY(-50%) rotateX(0) rotateY(-30deg);
transform-origin: 200px 0px -200px;
transition: transform 300ms 200ms, transform-origin 0s;
}
body .player_inner__middle .trigger--3 {
left: 0;
right: 0;
top: 0px;
bottom: auto;
width: 40px;
height: 20px;
}
body .player_inner__middle .trigger--3:checked + input + input + input + .cube {
transform: translateY(-50%) rotateX(0) rotateY(0);
transform-origin: 200px 200px -200px;
transition: transform 300ms 200ms, transform-origin 0s;
}
body .player_inner__middle .trigger--4 {
left: 0;
right: 0;
top: 0px;
bottom: auto;
width: 40px;
height: 20px;
}
body .player_inner__middle .trigger--4:checked + input + input + input + input + .cube {
transform: translateY(-50%) rotateX(0) rotateY(0);
transform-origin: 200px 200px -200px;
transition: transform 300ms 200ms, transform-origin 0s;
}
body .player_inner__middle .cube {
top: 190px;
height: 380px;
transform-style: preserve-3D;
perspective-origin: 190px 190px;
transition: all 300ms 200ms cubic-bezier(0.1, 1.94, 0.32, 1.02), transform-origin 0ms;
}
body .player_inner__middle .cube_inner {
height: 380px;
transform-style: preserve-3D;
}
body .player_inner__middle .cube_inner > div:nth-of-type(1) {
background: #ffb6c3;
}
body .player_inner__middle .cube_inner > div:nth-of-type(2) {
background: #ffacba;
}
body .player_inner__middle .cube_inner > div:nth-of-type(3) {
background: #ffa1b2;
}
body .player_inner__middle .cube_inner > div:nth-of-type(4) {
background: #ff97a9;
}
body .player_inner__middle .cube_inner__front {
background: url("//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png") !important;
background-size: 103% !important;
background-position-y: -71px !important;
}
body .player_inner__middle .cube_inner__front .bars {
position: absolute;
left: 0;
bottom: 0;
transform: rotatez(180deg);
width: 100%;
z-index: 1;
}
body .player_inner__middle .cube_inner__front .bars_bar {
width: 10px;
background: white;
opacity: 0.1;
float: left;
width: 10%;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(1) {
-webkit-animation: eq 1s 9ms infinite ease-in-out;
animation: eq 1s 9ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(2) {
-webkit-animation: eq 1s 66ms infinite ease-in-out;
animation: eq 1s 66ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(3) {
-webkit-animation: eq 1s 108ms infinite ease-in-out;
animation: eq 1s 108ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(4) {
-webkit-animation: eq 1s 60ms infinite ease-in-out;
animation: eq 1s 60ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(5) {
-webkit-animation: eq 1s 125ms infinite ease-in-out;
animation: eq 1s 125ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(6) {
-webkit-animation: eq 1s 48ms infinite ease-in-out;
animation: eq 1s 48ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(7) {
-webkit-animation: eq 1s 56ms infinite ease-in-out;
animation: eq 1s 56ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(8) {
-webkit-animation: eq 1s 272ms infinite ease-in-out;
animation: eq 1s 272ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(9) {
-webkit-animation: eq 1s 144ms infinite ease-in-out;
animation: eq 1s 144ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(10) {
-webkit-animation: eq 1s 200ms infinite ease-in-out;
animation: eq 1s 200ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(11) {
-webkit-animation: eq 1s 11ms infinite ease-in-out;
animation: eq 1s 11ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(12) {
-webkit-animation: eq 1s 432ms infinite ease-in-out;
animation: eq 1s 432ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(13) {
-webkit-animation: eq 1s 208ms infinite ease-in-out;
animation: eq 1s 208ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(14) {
-webkit-animation: eq 1s 84ms infinite ease-in-out;
animation: eq 1s 84ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(15) {
-webkit-animation: eq 1s 270ms infinite ease-in-out;
animation: eq 1s 270ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(16) {
-webkit-animation: eq 1s 32ms infinite ease-in-out;
animation: eq 1s 32ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(17) {
-webkit-animation: eq 1s 238ms infinite ease-in-out;
animation: eq 1s 238ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(18) {
-webkit-animation: eq 1s 450ms infinite ease-in-out;
animation: eq 1s 450ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(19) {
-webkit-animation: eq 1s 475ms infinite ease-in-out;
animation: eq 1s 475ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(20) {
-webkit-animation: eq 1s 60ms infinite ease-in-out;
animation: eq 1s 60ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(21) {
-webkit-animation: eq 1s 21ms infinite ease-in-out;
animation: eq 1s 21ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(22) {
-webkit-animation: eq 1s 132ms infinite ease-in-out;
animation: eq 1s 132ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(23) {
-webkit-animation: eq 1s 368ms infinite ease-in-out;
animation: eq 1s 368ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(24) {
-webkit-animation: eq 1s 120ms infinite ease-in-out;
animation: eq 1s 120ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(25) {
-webkit-animation: eq 1s 275ms infinite ease-in-out;
animation: eq 1s 275ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(26) {
-webkit-animation: eq 1s 442ms infinite ease-in-out;
animation: eq 1s 442ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(27) {
-webkit-animation: eq 1s 189ms infinite ease-in-out;
animation: eq 1s 189ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(28) {
-webkit-animation: eq 1s 308ms infinite ease-in-out;
animation: eq 1s 308ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(29) {
-webkit-animation: eq 1s 1015ms infinite ease-in-out;
animation: eq 1s 1015ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(30) {
-webkit-animation: eq 1s 810ms infinite ease-in-out;
animation: eq 1s 810ms infinite ease-in-out;
}
body .player_inner__middle .cube.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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