bootstrap实现图文卡片丝带Ribbon效果代码
代码语言:html
所属分类:布局界面
代码描述:bootstrap实现图文卡片丝带Ribbon效果代码
代码标签: bootstrap 图文 卡片 丝带 Ribbon
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.0.0.css"> <style> .card > img { max-width: 100%; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .ribbon { width: 0; height: 0; position: absolute; top: -10px; left: -10px; overflow: hidden; animation: anim 1s forwards; } .ribbon:before, .ribbon:after { content: ""; width: 20px; height: 20px; background-color: #004a6b; position: absolute; bottom: 0; z-index: -2; } .ribbon:before { top: 0; right: 0; z-index: -2; } .ribbon span { width: 225px; height: 43px; background-color: #0094d7; position: absolute; transform: rotate(-45deg); right: -20px; top: 40px; display: grid; place-items: center; color: white; font-weight: 500; letter-spacing: 1px; font-size: 1.1rem; } @keyframes anim { 100% { width: 150px; height: 150px; } } </style> </head> <body> <div class="container my-4"> <div class="row"> <div class="col"> <div class="card"> <div class="ribbon"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0