音乐播放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; } }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0