css实现进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:css实现进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:300); *, *:before, *:after { box-sizing: border-box; } body { font-size: 100%; font-family: "Open sans", Arial, sans-serif; color: #fff;background-color: #1F1F1F; } .c { margin: 12rem auto; max-width: 600px; } @media(max-width: 610px) { .c { padding: 0 5%; } } .bar { height: 40px; width: 0; transition: width 1.2s ease-in-out; position: relative; margin: 0.5rem 0; border-radius: 4px; } @media(max-width: 350px) { .bar { margin: 2.5rem 0 0.5rem; } } .bar.mint { background-color: #14C3A2; background-image: repeating-linear-gradient(-45deg, #14C3A2, #14C3A2 30px, #22e8c3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0