css+svg实现圆形进度条圈圈卡片悬浮效果代码
代码语言:html
所属分类:进度条
代码描述:css+svg实现圆形进度条圈圈卡片悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #101010; } .container { position: relative; width: 900px; display: flex; justify-content: space-around; } .container .card { position: relative; width: 259px; background: linear-gradient(0deg, #1b1b1b, #222, #1b1b1b); display: flex; justify-content: center; align-items: center; height: 300px; border-radius: 4px; text-align: center; overflow: hidden; transition: 0.5s; } .container .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, .5); } .container .card:before { content: ''; position: absolute; top: 0; left: -50%; width: 100%; height: 100%; background: rgba(255, 255, 255, .03); pointer-events: none; z-index: 1; } .percent { position: relative; width: 150px; height: 150px; border-radius: 50%; box-shadow: inset 0 0 50px #000; background: #222; z-index: 1000; } .percent .number { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .percent .number h2 { color: #777; font-weight: 700; font-size: 40px; transition: 0.5s; } .card:hover .percent .number h2 { color: #fff; font-size: 60px; } .percent .number h2 span { font-size: 24px; color: #777; transition: 0.5s; } .card:hover .percent .number h2 span { color: #fff; } .text { position: relative; color: #777; margin-top: 20px; font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; transition: 0.5s; } .card:hover .text { color: #fff; } svg { position: relative; width: 150px; height: 150px; z-index: 1000; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0