简洁风格音乐播放器动画效果
代码语言:html
所属分类:动画
代码描述:简洁风格音乐播放器动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: radial-gradient(circle at top, #f9f9f9, #9f9f9f); } .player { position: relative; font-size: 1.25rem; width: 10em; height: 8em; -webkit-user-select: none; -moz-user-select: none; /* Screen Centering: */ top: 50%; left: 50%; margin: -4em 0 0 -5em; } [class*="fontawesome-"]::before { font-family: 'FontAwesome', sans-serif; position: relative; display: block; text-align: center; color: #c9cfcd; line-height: 3em; text-shadow: 0 -0.03em rgba(0, 0, 0, 0.2), 0 0.03em 0.03em rgba(255, 255, 255, 0.55); transition: all 80ms; } .big:hover > [class*="fontawesome-"]::before, .small:hover > [class*="fontawesome-"]::before, .dl-tab:hover > [class*="fontawesome-"]::before { color: #d4d9d7; } .big { position: relative; z-index: 9; cursor: pointer; height: 6em; width: 6em; margin: 0 auto; border-radius: 100%; background: radial-gradient(circle at 50% 5%, #f0f2f5, #d8dde4); box-shadow: 0 0.22em 0.3em -0.22em rgba(0, 0, 0, 0.7), inset 0 0.2em 0.4em -0.22em rgba(255, 255, 255, 0.9); transition: all 80ms; } .big > span { font-size: 2em; } .big:hover { background: radial-gradient(circle at 50% 5%, #f3f4f7, #dbdfe6); } .big:hover::before { background: radial-gradient(circle at 50% 92%, #f3f4f7, #dbdfe6); } .big:active { box-shadow: 0 0.22em 0.3em -0.24em rgba(0, 0, 0, 0.6), inset 0 0.2em 0.4em -0.22em rgba(255, 255, 255, 0.8); background: radial-gradient(circle at 50% 5%, #f0f2f5, #d8dde4); top: 0.03em; } .big:active::before { background: radial-gradient(circle at 50% 92%, #f0f2f5, #d8dde4); } .big::before { position: absolute; content: ''; width: 60%; height: 60%; margin: 20%; border-radius: 100%; background: radial-gradient(circle at 50% 92%, #f0f2f5, #d8dde4); transition: all 80ms; } .play { display: none; } .play.on { display: block; } .pause { display: block; } .pause.on { display: none; } .small { position: relative; z-index: 9; cursor: pointer; top: -1em; width: 3em; height: 3em; border-radius: 100%; background: radial-gradient(circle at 50% 10%, #f1f3f6, #d6dce3); box-shadow: 0 0.22em 0.27em -0.18em rgba(0, 0, 0, 0.45), inset 0 0.15em 0.2em -0.15em rgba(255, 255, 255, 0.8); transition: all 80ms; } .small:hover { background: radial-gradient(circle at 50% 5%, #f6f7f9, #dce1e7); } .small:active { top: -0.97em; background: radial-gradient(circle at 50% 5%, #f0f2f5, #d8dde4); box-shadow: 0 0.18em 0.22em -0.16em rgba(0, 0, 0, 0.43), inset 0 0.15em 0.25em -0.2em rgba(255, 255, 255, 0.75); } .plaque { position: absolute; z-index: 8; top: -0.6em; left: -3.6em; width: 7.2em; height: 7.2em; margin-left: 50%; border-radius: 100%; background: #d6dbda; box-shadow: inset 0 0.1em 0.07em -0.03em rgba(255, 255, 255, 0.75), 0 0.25em 0.25em -0.175em rgba(0, 0, 0, 0.4); } .plaque::before, .plaque::after { position: absolute; content: ''; bottom: -1.7em; width: 3.6em; height: 3.6em; border-radius: 100%; background: #d6dbda; } .plaque::before { left: -1.7em; box-shadow: inset 0.1em 0.18em 0.02em -0.17em rgba(255, 255, 255, 0.7), 0 0.25em 0.25em -0.15em rgba(0, 0, 0, 0.5); } .plaque::after { right: -1.7em; box-shadow: inset -0.1em 0.18em 0.02em -0.17em rgba(255, 255, 255, 0.7), 0 0.25em 0.25em -0.15em rgba(0, 0, 0, 0.5); } .left { float: left; } .right { float: right; } .star-tab { position: absolute; z-index: 6; top: -2.4em; left: -5.4em; width: 10.8em; height: 10.8em; cursor: pointer; margin-left: 50%; border-radius: 100%; clip: rect(8.1em, 8.1em, 11.07em, 2.7em); background: radial-gradient(rgba(44, 62, 80, 0.8), rgba(49, 70, 90, 0.8)); box-shadow: 0 0.2em 0.2em -0.15em rgba(0, 0, 0, 0.5).........完整代码请登录后点击上方下载按钮下载查看
网友评论0