jquery实现带进度条的播放暂停按钮点击效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现带进度条的播放暂停按钮点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #button-container { display: flex; justify-content: center; align-items: center; height: 100vh; } button { display: flex; align-items: center; justify-content: center; height: 65px; width: 85px; border-radius: 5px; border: none; background: #004969; cursor: pointer; transition: transform 0.1s ease-in-out; position: relative; overflow: hidden; } button:hover { transform: scale(1.1); } button:before, button:after { transition: transform 0.25s ease-in-out; } button:before { position: relative; content: ""; display: block; border-left: 15px solid #abe2f9; border-top: 12px solid transparent; border-bottom: 12px solid transparent; opacity: 1; z-index: 0; } button:after { content: ""; display: block; position: absolute; height: 22px; width: 22px; box-shadow: inset 8px 0 0 #004969, inset -8px 0 0 #004969; transform: scale(0); z-index: 2; } button .progress { position: absolute; z-index: 1; width: 100%; height: 65px; bottom: 0px; left: 0; } button .progress:before { content: "&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0