音乐播放app交互效果
代码语言:html
所属分类:布局界面
代码描述:音乐播放app交互效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } .stuff { position: absolute; width: 100%; bottom: 0; right: 0; } .stuff .fa-twitter { float: right; color: #1DA1F2; font-size: 50px; margin: 0 20px 20px 0; } .stuff .fa-dribbble { float: left; color: #C32361; font-size: 50px; margin: 0 0 20px 20px; } .container { position: relative; height: 100vh; background: url("http://repo.bfw.wiki/bfwrepo/image/5df879813a5ac.png") center center no-repeat; background-size: cover; font-family: 'Open Sans', sans-serif; overflow: hidden; } .app { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 300px; height: 515px; background-color: rgba(117, 142, 170, 0.4); box-shadow: 0 0 1px rgba(117, 142, 170, 0.4); } .app__bg { position: absolute; top: 0; left: 0; -webkit-transform: translateX(100%); transform: translateX(100%); width: 100%; height: 100%; background-color: rgba(111, 137, 166, 0.4); z-index: 0; opacity: 0; } .app__cross { position: absolute; top: 85px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 1px #fff; opacity: 0; z-index: 0; -webkit-animation: fadeInCross 1.5s forwards; animation: fadeInCross 1.5s forwards; } @-webkit-keyframes fadeInCross { 33% { -webkit-transform: translate(-50%, 75px) rotate(0); transform: translate(-50%, 75px) rotate(0); opacity: 1; } 40% { -webkit-transform: translate(-50%, 75px) rotate(0); transform: translate(-50%, 75px) rotate(0); opacity: 1; } 65% { -webkit-transform: translate(-50%, 75px) rotate(-45deg); transform: translate(-50%, 75px) rotate(-45deg); opacity: 1; } 75% { -webkit-transform: translate(-50%, 75px) rotate(-45deg); transform: translate(-50%, 75px) rotate(-45deg); opacity: 1; } 100% { -webkit-transform: translate(-50%, 75px) rotate(-90deg); transform: translate(-50%, 75px) rotate(-90deg); opacity: 1; } } @keyframes fadeInCross { 33% { -webkit-transform: translate(-50%, 75px) rotate(0); transform: translate(-50%, 75px) rotate(0); opacity: 1; } 40% { -webkit-transform: translate(-50%, 75px) rotate(0); transform: translate(-50%, 75px) rotate(0); opacity: 1; } 65% { -webkit-transform: translate(-50%, 75px) rotate(-45deg); transform: translate(-50%, 75px) rotate(-45deg); opacity: 1; } 75% { -webkit-transform: translate(-50%, 75px) rotate(-45deg); transform: translate(-50%, 75px) rotate(-45deg); opacity: 1; } 100% { -webkit-transform: translate(-50%, 75px) rotate(-90deg); transform: translate(-50%, 75px) rotate(-90deg); opacity: 1; } } .app__cross:after, .app__cross:before { content: ''; position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 63px; height: 2px; background-color: #fff; } .app__cross:before { left: 17%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .app__play { position: absolute; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; bottom: 0; width: 100%; height: 65px; -webkit-transform: translateY(65px); transform: translateY(65px); background-color: rgba(47, 60, 96, 0.4); box-shadow: 0 0 1px rgba(47, 60, 96, 0.4); cursor: pointer; opacity: 0; z-index: 1; -webkit-animation: fadeInPlay .5s forwards; animation: fadeInPlay .5s forwards; } @-webkit-keyframes fadeInPlay { 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fadeInPlay { 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .app__play:hover .app__play-par, .app__play-btn, .app__play-btn:after { text-shadow: 0 0 1px #eaeaea; color: white; } .app__play:hover .app__play-btn { text-shadow: 0 0 1px #eaeaea; border-color: white; } .app__play:hover .app__play-btn:after { text-shadow: 0 0 1px #eaeaea; border-color: transparent transparent transparent white; } .app__play-par { position: relative; text-align: center; color: #e8e8e8; -webkit-transition: .2s; transition: .2s; } .app__play-btn { position: relative; margin-right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c2c2c2; -webkit-transition: .2s; transition: .2s; } .app__play-btn:after { content: ''; position: absolute; display: block; top: 50%; left: 35%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #c2c2c2; -webkit-transition: .2s; transition: .2s; } .app__nav { position: relative; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; height: 56px; -webkit-transform: translateX(100%); transform: translateX(100%); background-color: rgba(101, 129, 160, 0.4); border-bottom: 2px solid rgba(133, 155, 180, 0.4); z-index: 5; opacity: 0; } .app__nav-hamburger { position: relative; margin: 33px 0 0 15px; width: 8px; height: 1px; background-color: #d1d1d1; box-shadow: 0 0 1px #d1d1d1; } .app__nav-hamburger:after, .app__nav-hamburger:before { content: ''; position: absolute; display: block; top: -5px; width: 13px; height: 1px; background-color: #d1d1d1; box-shadow: 0 0 1px #d1d1d1; } .app__nav-hamburger:before { top: 5px; } .app__nav-text { margin: 22px 0 0 15px; color: #eaeaea; } .app__nav-settings { margin: 20px 15px 0 0; font-size: 20px; color: #eaeaea; -webkit-transition: .3s; transition: .3s; cursor: pointer; } .app__nav-settings:hover { text-shadow: 0 0 2px #eaeaea; } .app__search { position: relative; height: 45px; -webkit-transform: translateX(100%); transform: translateX(100%); background-color: rgba(101, 129, 160, 0.4); z-index: 1; opacity: 0; } .app__search-input { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 85%; height: 25px; padding-left: 15px; font-size: 12px; color: #eaeaea; border: none; border-radius: 20px; background-color: rgba(90, 116, 146, 0.4); } .app__search-input::-webkit-input-placeholder { color: rgba(149, 168, 189, 0.4); text-shadow: 0 0 1px rgba(149, 168, 189, 0.4); } .app__search-input::-moz-placeholder { color: rgba(149, 168, 189, 0.4); text-shadow: 0 0 1px rgba(149, 168, 189, 0.4); } .app__search-input:-ms-input-placeholder { color: rgba(149, 168, 189, 0.4); text-shadow: 0 0 1px rgba(149, 168, 189, 0.4); } .app__search-input:-moz-placeholder { color: rgba(149, 168, 189, 0.4); text-shadow: 0 0 1px rgba(149, 168, 189, 0.4); } .app__search-input:focus { outline: none; } .app__search-fa { position: absolute; top: 15px; right: 35px; color: #d1d1d1; font-size: 14px; } .app__song { position: relative; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; height: 88px; -webkit-transform: translateX(100%); transform: translateX(100%); background-color: rgba(117, 142, 170, 0.4); -webkit-transition: .4s; transition: .4s; z-index: 1; opacity: 0; } .app__song:after { content: ''; position: absolute; display: block; right: 0; bottom: 0; width: 208px; height: 1px; background-color: rgba(133, 155, 180, 0.4); box-shadow: 0 0 2px rgba(133, 155, 180, 0.4); } .app__song-img { width: 88px; height: 88px; margin-left: 3px; } .app__song-info { width: 160px; } .app__song-info-name, .app__song-info-artist { color: #eaeaea; text-shadow: 0 0 1px #eaeaea; margin-left: 17px; font-size: 12px; font-weight: 600; cursor: default; } .app__song-info-name { margin-top: 12px; } .app__song-info-artist { position: relative; } .app__song-info-artist:after { content: ''; position: absolute; display: block; top: 30px; width: 130px; height: 1px; background-color: rgba(234, 234, 234, 0.15); box-shadow: 0 0 1px rgba(234, 234, 234, 0.15); } .app__song-info-likes, .app__song-info-dl { display: inline-block; margin: 20px 0 0 17px; font-size: 10px; color: #d1d1d1; text-shadow: 0 0 1px #d1d1d1; cursor: default; } .app__song-info-likes .fa, .app__song-info-dl .fa { margin-right: 4px; } .app__song-dl-arrow { position: relative; margin: 25px auto 0 auto; width: 25px; height: 25px; border-radius: 50%; border: 1px solid rgba(234, 234, 234, 0.5); } .app__song-dl-arrow span { position: absolute; left: 11px; top: 5px; height: 12px; width: 1px; background-color: rgba(234, 234, 234, 0.7); } .app__song-dl-arrow span:after, .app__song-dl-arrow span:before { content: ''; position: absolute; display: block; left: -4px; bottom: 2px; width: 5px; height: 1px; background-color: rgba(234, 234, 234, 0.7); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .app__song-dl-arrow span:before { left: 0px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .app__song-likes { position: relative; display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-align: center; align-items: center; width: 100%; height: 60px; background-color: rgba(101, 129, 160, 0.4); opacity: 0; -webkit-transition: .5s; transition: .5s; } .app__song-likes-pause { opacity: 0; -webkit-transition: .8s; transition: .8s; } .app__song-likes-pause:after, .app__song-likes-pause:before { content: ''; position: absolute; display: block; top: 17px; left: 45px; height: 24px; width: 2px; background-color: #eaeaea; border-radius: 5px; } .app__song-likes-pause:before { left: 65px; } .app__song-likes-like { width: 35px; text-align: center; opacity: 0; -webkit-transition: .8s; transition: .8s; margin-left: 15px; font-size: 27px; color: #eaeaea; } .app__song-likes-dl { position: relative; height: 24px; width: 2px; background-color: #eaeaea; opacity: 0; -webkit-transition: .8s; transition: .8s; } .app__song-likes-dl:after, .app__song-likes-dl:before { content: ''; position: absolute; display: block; bottom: 0; left: -4px; height: 10px; width: 2px; background-color: #eaeaea; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .app__song-likes-dl:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 4px; } .app__song-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: .3s; transition: .3s; cursor: pointer; } .app__song-wrapper:hover { background-color: rgba(90, 116, 146, 0.3); } .app__song--1-img { background: url("http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png") center center no-repeat; background-size: cover; } .app__song--2 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -webkit-transition: .6s; transition: .6s; } .app__song--2-img { background: url("http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png") center center no-repeat; background-size: cover; } .app__song--3-img { background: url("http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png") center center no-repeat; background-size: cover; } .app__song--4 { border: none; } .app__song--4:after { display: none; } .app__song--4-img { background: url("http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png") center center no-repeat; background-size: cover; } .showIn { -webkit-animation: showIn 0.6s forwards; animation: showIn 0.6s forwards; } @-webkit-keyframes showIn { 15% { opacity: 0; } 50% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } 70% { -webkit-transform: translateX(5px); transform: translateX(5px); } 100% { -webkit-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0