jquery+svg实现一个音乐app ui效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery+svg实现一个音乐app ui效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> :root { --blue-bubble: #bbe6f3; --small-b-bubble: #bae5f2; --pink-bubble: #ebc7e5; --font-color: #063064; } * { box-sizing: border-box; } *:focus { outline: none; } html, body { width: 100%; height: 100%; overflow: hidden } body { background-color: #303030 } .container { background-color: #f3fcfd; width: 800px; height: 600px; margin: 60px auto; position: relative; overflow: hidden; border-radius: 6px; } .bubble { position: absolute; border-radius: 50%; } .pink-bubble { width: 460px; height: 460px; right: -160px; top: -110px; background-color: var(--pink-bubble); } .blue-bubble { width: 520px; height: 520px; left: -30px; top: 345px; background-color: var(--blue-bubble); } .small-b-bubble { width: 50px; height: 50px; right: 40px; bottom: 85px; background-color: var(--small-b-bubble); } .small-p-bubble { width: 105px; height: 105px; left: -45px; top: 140px; background-color: var(--pink-bubble); } .app-ui { background-color: #fff; width: 235px; height: 500px; position: absolute; left: 140px; top: 35px; border-radius: 30px; box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2); } .left-ui { overflow: hidden; } .right-ui { left: 435px; top: 60px; box-shadow: -6px 14px 40px -20px rgba(0, 0, 0, 0.2); background-color: #bbe6f3; } .inside-right { left: 0; top: 70px; height: 430px; } .header { font-family: "Fjalla One", sans-serif; color: var(--font-color); display: flex; justify-content: space-between; align-items: center; width: 235px; padding: 27px 27px 21px 27px; font-size: 22px; } .menu-line { border: 1px solid var(--font-color); width: 25px; border-radius: 50px; } .menu-line:before { content: ""; position: absolute; top: 45px; left: 197px; border: 0.05em solid; width: 8px; border-radius: 50px; } .menu-line:after { content: ""; position: absolute; top: 45px; left: 190px; border: 0.05em solid; width: 3px; border-radius: 50px; } .left-menu-bar { position: relative; font-family: "Roboto", sans-serif; color: var(--font-color); left: -5px; } .ur-playlist { font-size: 11px; font-weight: 500; transform: rotate(270deg); position: absolute; left: 2px; top: 40px; cursor: pointer; } .playlist-icon { width: 11px; position: absolute; left: 28px; top: -6px; cursor: pointer; } .like-recent { position: absolute; top: 110px; } .recent { left: 18px; top: 90px; } .recent-detail { width: 4px; height: 4px; background-color: var(--font-color); position: absolute; top: 95px; left: 15px; border-radius: 50%; } .like { left: 25px; top: 140px; color: #aeb8cc; } .like:hover { color: var(--font-color); } .album-img { position: relative; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png"); width: 130px; height: 165px; background-repeat: no-repeat; background-size: cover; border-radius: 20px; margin-left: 58px; box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5); cursor: pointer; } .album-img:hover { transform: scale(1.02); } .relax { position: absolute; bottom: 15px; left: 20px; color: #fff; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; } .btn { background-color: #ffffff; position: absolute; width: 27px; height: 27px; right: 10px; bottom: 10px; border-radius: 9px; transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0px 1px 2px white, 0px 2px 1px rgba(0, 0, 0, 0.15); cursor: pointer; border: none; } .btn:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 15px; z-index: 2; } .btn:active { box-shadow: 0 5px 50px rgba(0, 0, 0, 0.02); } .btn:active:after { box-shadow: inset 0px 2px 3px white, inset 0px 2px 0px rgba(0, 0, 0, 0.1); } .btn.active.play-pause .icon.pause { opacity: 1; transform: translate(-50%, -50%); } .btn.active.play-pause .icon.play { opacity: 0; } .play { width: 13px; position: absolute; top: 7px; left: 8px; } .play svg { stroke-width: 5; } .pause { width: 12px; opacity: 0; position: absolute; left: 14px; top: 15px; } .flowers-img { background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png"); background-repeat: no-repeat; background-size: cover; height: 135px; width: 120px; position: absolute; right: -88px; top: 90px; border-radius: 20px; transform: rotate(180deg); box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5); } .flowers-img:hover { cursor: pointer; -webkit-transform: rotate(180deg) scale(1.03); } .music-list { cursor: pointer; margin-left: 50px; margin-top: 20px; } .song { display: flex; margin-bottom: 10px; align-items: center; } .song:hover { transform: scale(1.02); box-shadow: -8px 10px 3px -11px rgba(0, 0, 0, 0.4); } .song-img > img { background-repeat: no-repeat; background-size: cover; width: 30px; height: 30px; border-radius: 10px; margin-right: 10px; } .song-name { font-family: "Roboto", sans-serif; color: var(--font-color); font-weight: 500; font-size: 10px; } .song-detail { display: flex; flex-direction: column; } .artist { font-family: "Roboto", sans-serif; color: #d0d2e5; font-weight: 400; font-size: 9px; margin-top: 4px; } .nav svg { width: 17px; } .nav { position: absolute; bottom: 0; color: #c5c7da; left: 0; width: 100%; background-color: #fff; border-radius: 20px 20px 0 0; height: 52px; } .nav-first { width: 100%; display: flex; justify-content: space-evenly; align-items: center; height: 52px; } .player-bg { position: absolute; top: 394px; left: 0; background-color: #bae6f2; height: 80px; width: 100%; border-radius: 25px 25px 0 0; } .player-info { position: absolute; top: 394px; left: 0; } .player-cover img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center; margin: 10px 0 10px 25px; border: 2px solid #fff; box-shadow: 0px 15px 30px -6px rgba(0, 0, 0, 0.5); } .pointer { position: absolute; top: 27px; width: 9px; height: 9px; margin: -6px 0 0 37px; background-color: #a5c8e3; border-radius: 50%; box-shadow: inset 0 0 0 1.7px #fff; } .player-info .song-detail { margin: -42px 0 0 65px; } .play-artist { color: #6590ad; margin-top: 5px; font-size: 8px; } .player-info svg { width: 12px; position: absolute; right: -50px; top: 22px; } .player-bg .btn { bottom: 40px; width: 24px; height: 23px; right: 25px; } .small-play { width: 10px; top: 5px; left: 8px; } .small-pause { width: 10px; left: 12px; top: 13px; } @media only screen and (max-width: 768px) { .container { transform: scale(0.8); right: 60px; margin-top: -40px; } } @media only screen and (max-width: 480px) { .container { transform: scale(0.6); right: 200px; } } .play-action { display: flex; margin-top: 40px; justify-content: space-between; align-items: center; } .dot { border-radius: 50%; width: 3px; height: 3px; background-color: #043165; margin-right: 5px; } .what-play { font-family: "Roboto", sans-serif; color: var(--font-color); font-weight: 500; font-size: 10px; } .double-dot { display: flex; margin-right: 15px; } .line { width: 20px; height: 2px; margin-left: 20px; border-radius: 10px; background-color: #043165; } .other-line { position: absolute; width: 10px; height: 2px; top: 44px; left: 19px; border-radius: 5px; background-color: #043165; transform: rotate(-30deg); } .half-arrow { margin-top: 2px; } .bigPlay img { width: 160px; height: 160px; border-radius: 50%; border: 3px solid #fff; position: relative; left: 37px; top: 30px; object-fit: cover; object-position: top right; animation: rotateImg 3s linear 0s infinite forwards; animation-play-state: paused; } .bigPlay img.active { animation-play-state: running; } @keyframes rotateImg { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } .bigPlay { position: absolute; } .bigPlay .btn { top: 90px; left: 96px; width: 44px; height: 44px; border-radius: 18px; } .icon.play.bigger-play { width: 22px; top: 11px; left: 13px; } .icon.pause.bigger-pause { width: 20px; left: 22px; top: 23px; } .right-detail { margin: 50px 0; text-align: center; } .right-song { font-size: 20px; font-family: "Fjalla One", sans-serif; } .right-artist { font-size: 12px; color: #aeb8cc; } .lines { border-left: 2px solid var(--font-color); margin-left: -55px; height: 5px; transition: all 0.1s ease; } .lines.grey { border-left: 2px solid #e8e9f4; } .line-wrapper { margin-top: -20px; margin-left: 62px; } .lines:nth-child(1) { margin-left: -40px; margin-top: 60px; } .lines:nth-child(2) { margin-left: -35px; margin-top: -12px; height: 18px; } .lines:nth-child(3) { margin-left: -30px; margin-top: -26px; height: 36px; } .lines:nth-child(4) { margin-left: -25px; margin-top: -40px; height: 48px; } .lines:nth-child(5) { margin-left: -20px; margin-top: -43px; height: 33px; } .lines:nth-child(6) { margin-left: -15px; margin-top: -30px; height: 25px; } .lines:nth-child(7) { margin-left: -10px; margin-top: -32px; height: 40px; } .lines:nth-child(8) { margin-left: -5px; margin-top: -40px; height: 48px; } .lines:nth-child(9) { margin-left: 0; margin-top: -43px; height: 33px; } .lines:nth-child(10) { margin-left: 5px; margin-top: -30px; height: 25px; } .lines:nth-child(11) { margin-left: 10px; margin-top: -32px; height: 40px; } .lines:nth-child(12) { margin-left: 15px; margin-top: -37px; height: 33px; } .lines:nth-child(13) { margin-left: 20px; margin-top: -30px; height: 25px; } .lines:nth-child(14) { margin-left: 25px; margin-top: -32px; height: 40px; } .lines:nth-child(15) { margin-left: 30px; margin-top: -40px; height: 48px; } .lines:nth-child(16) { margin-left: 35px; margin-top: -42px; height: 35px; } .lines:nth-child(17) { margin-left: 40px; margin-top: -33px; height: 25px; } .lines:nth-child(18) { margin-left: 45px; margin-top: -22px; height: 20px; } .lines:nth-child(19) { margin-left: 50px; margin-top: -18px; height: 16px; } .lines:nth-child(20) { margin-left: 55px; margin-top: -19px; height: 21px; } .lines:nth-child(21) { margin-left: 60px; margin-top: -27px; height: 32px; } .lines:nth-child(22) { margin-left: 65px; margin-top: -30px; height: 34px; } .lines:nth-child(23) { margin-left: 70px; margin-top: -38px; height: 48px; } .lines:nth-child(24) { margin-left: 75px; margin-top: -44px; height: 33px; } .lines:nth-child(25) { margin-left: 80px; margin-top: -35px; height: 40px; } .lines:nth-child(26) { margin-left: 85px; margin-top: -35px; height: 34px; } .lines:nth-child(27) { margin-left: 90px; margin-top: -42px; height: 48px; } .lines:nth-child(28) { margin-left: 95px; margin-top: -44px; height: 33px; } .lines:nth-child(29) { margin-left: 100px; margin-top: -35px; height: 40px; } .lines:nth-child(30) { margin-left: 105px; margin-top: -35px; height: 40px; } .lines:nth-child(31) { margin-left: 110px; margin-top: -45px; height: 40px; } .lines:nth-child(32) { margin-left: 115px; margin-top: -38px; height: 48px; } .lines:nth-child(33) { margin-left: 120px; margin-top: -44px; height: 33px; } .lines:nth-child(34) { margin-left: 125px; margin-top: -35px; height: 40px; } .lines:nth-child(35) { margin-left: 130px; margin-top: -36px; height: 30px; } .lines:nth-child(36) { margin-left: 135px; margin-top: -25px; height: 22px; } .lines:nth-child(37) { margin-left: 140px; margin-top: -25px; height: 30px; } .lines:nth-child(38) { margin-left: 145px; margin-top: -39px; height: 48px; } .lines:nth-child(39) { margin-left: 150px; margin-top: -44px; height: 33px; } .lines:nth-child(40) { margin-left: 155px; margin-top: -36px; height: 41px; } .lines:nth-child(41) { margin-left: 160px; margin-top: -44px; height: 47px; } .lines:nth-child(42) { margin-left: 165px; margin-top: -44px; height: 40px; } .lines:nth-child(43) { margin-left: 170px; margin-top: -34px; height: 30px; } .heart { width: 18px; cursor: pointer; } .heart :hover { fill: #E52121; } .heart:hover { transform: scale(1.2); } .addTo { width: 16px; cursor: pointer; } .menu { width: 16px; cursor: pointer; } .left-bar-wrapper { display: flex; justify-content: space-evenly; margin-top: 35px; } .blue-heart:hover { fill: #063064; cursor: pointer; transform: scale(1.2); } .second svg { width: 11px; transform: rotate(-45deg); margin: 0 4px 0 4px; } .second { margin: 20px 60px 0 90px; display: flex; align-items: center; font-size: 9px; font-weight: 500; font-family: "Roboto", sans-serif; color: #c9cade; } .second .listened { color: var(--font-color); } .grey-detail { background-color: #eff3f8; width: 205px; height: 90px; border-radius: 50%; margin-top: -100px; margin-left: 13px; } .grey-detail-sec { background-color: #dae3f0; width: 176px; height: 130px; border-radius: 50%; margin-top: -110px; margin-left: 29px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet"> </head> <body > <div class="bubble pink-bubble"></div> <div class="bubble blue-bubble"></div> <div class="bubble small-p-bubble"></div> <div class="bubble small-b-bubble"></div> <div class="wrapper"> <div class="app-ui left-ui"> <div class="header"> <div class="discover">Discover</div> <div class="menu-line"></div> </div> <div class="left-menu-bar"> <div class="playlist"> <div class="playlist-icon"> <svg xmlns="http://www.w3.org/2000.........完整代码请登录后点击上方下载按钮下载查看
网友评论0