svg 视频播放器简洁页面效果
代码语言:html
所属分类:多媒体
代码描述:svg 视频播放器简洁页面效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <style> :root { --accent: #00C6F2; /* --accent: #d7577e; */ --main: #ffffff; } body { width: 100%; height: 100%; background: #ff578e; } html { display: flex; justify-content: center; font-family: Comfortaa; font-style: normal; font-weight: normal; line-height: normal; font-size: 16px; color: var(--main); } .player-container { padding: 40px; max-width: 700px; margin: auto; } .player { width: 100%; height: 0; padding-bottom: 56.25%; box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; background: #000000; } .player:fullscreen { padding-bottom: 100vh; } .player:-webkit-full-screen { padding-bottom: 100vh; } .player:-moz-full-screen { padding-bottom: 100vh; } .player:-ms-fullscreen { padding-bottom: 100vh; } .player video { width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-50%); } .controls { padding: 0; position: absolute; bottom: -80px; width: 100%; height: 48px; box-sizing: border-box; background: linear-gradient( 180deg, rgba(37, 37, 37, 0) 10%, rgba(37, 37, 37, 0.6) 80% ); transition: all 0.2s ease-in 5s; } .player:hover .controls { bottom: 0; transition: all 0.2s ease-out; } .time { position: absolute; right: 30px; bottom: 100%; padding-bottom: 14px; } .progress { height: 8px; width: calc(100% - 40px); background: rgba(60, 60, 60, 0.6); margin: auto; border-radius: 6px; position: absolute; left: 20px; bottom: 100%; transition: height 0.1s ease-in-out; } .progress:hover { height: 10px; } .progress-filled { background: var(--accent); width: 0%; height: 100%; border-radius: 6px; transition: all 0.1s; } .controls-main { width: calc(100% - 40px); margin: auto; height: 100%; display: flex; justify-content: space-between; } .controls-left, .controls-right { flex: 1; display: flex; align-items: center; overflow: hidden; } .controls-left { margin-le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0