css+div实现价格套餐悬浮选择效果代码
代码语言:html
所属分类:悬停
代码描述:css+div实现价格套餐悬浮选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;800&display=swap");* { margin: 0; padding: 0; box-sizing: border-box } body { font-family: "Noto Sans JP",sans-serif; min-height: 100vh; display: grid; place-items: center } ul { list-style: none; padding: 0; margin: 0 } ul li+li { margin-top: .375rem } a { text-decoration: none } section { padding: 3rem 0; max-width: min(87.5rem,90%); margin: 0 auto; text-align: center; width: 100% } section h2 { font-size: 1.8rem; text-transform: capitalize; margin-bottom: 1.563rem; color: #1b1b1b } section p { font-size: 1rem; max-width: 50rem; margin-inline:auto;color: #1b1b1b } section .pricing-cards { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8em; margin-top: 5em } section .pricing-card { flex: 0 1 18.75rem; background: #fff; text-align: center; padding: 2.5em 2em; border-radius: .625rem; position: relative; cursor: pointer } section .pricing-card li { text-transform: capitalize; font-size: 1rem } section .pricing-card .ribbon { position: absolute; width: 2.5rem; height: 6.875rem; background: #b62828; top: -0.625rem; left: 1.563rem; transition: opacity .3s ease-in; visibility: hidden; opacity: 0 } section .pricing-card .ribbon>div { transform: rotate(-90deg); color: #fff; text-transform: uppercase; font-weight: bold; margin-top: .625rem; margin-bottom: .625rem } section .pricing-card .ribbon svg { width: .625rem; color: #1b1b1b } section .pricing-card .ribbon::before { content: ""; position: absolute; top: 0; right: -0.563rem; border-left: .313rem solid #b62828; border-right: .313rem solid transparent; border-top: .313rem solid transparent; border-bottom: .313rem solid #b62828 } section .pricing-card .ribbon::after { content: ""; position: absolute; bottom: -0.063rem; left: 0; border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-top: 1.25rem solid transparent; border-bottom: 1.25rem solid #1b1b1b } section .pricing-card hr { display: block; width: 35%; margin: 0 auto; margin-top: 1.875rem; margin-bottom: 1.563rem; visibility: visible } section .pricing-card hr.first { background: #d6d4d3; height: .156rem; border: 0 } section .pricing-card hr.second { background: #1b1b1b; height: .25rem; border: 0 } section .pricing-card h3 { color: #1b1b1b; text-transform: uppercase; font-size: .9rem; letter-spacing: .063rem } section .pricing-card .card-price { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: #1b1b1b; margin: 1.563rem 0 } section .pricing-card .card-price span { color: #1b1b1b; font-size: 1.1rem; margin-right: .625rem } section .pricing-card .card-btn { background: #d6d4d3; color: #1b1b1b; text-transform: uppercase; font-weight: bold; font-size: .9rem; padding: .5rem 1.875rem; display: inline-block; transition: opacity .3s ease-in; visibility: hidden; opacity: 0 } section .pricing-card.active { background: #1b1b1b; color: #a3a3a3 } section .pricing-card.active li { font-size: 1.063rem } section .pricing-card.active .ribbon { opacity: 1; vis.........完整代码请登录后点击上方下载按钮下载查看
网友评论0