css布局实现图标文字卡片列表悬浮效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现图标文字卡片列表悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap'); body{ font-size: 17px; line-height: 30px; font-weight: 400; -moz-osx-font-smoothing: grayscale; word-break: break-word; -webkit-font-smoothing: antialiased; font-family: "Epilogue", sans-serif; margin: 0; background: #fff; } * { box-sizing: border-box; } .creative-cards{ padding: 120px 0; position: relative; } .creative-cards .container { max-width: 1320px; width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; } .creative-cards .container .row{ display: flex; flex-wrap: wrap; } .creative-cards .container .row .card-column { flex: 0 0 auto; width: 33.33333333%; text-align: center; max-width: 100%; padding-right: 15px; padding-left: 15px; } .card-details { width: 80%; margin: auto; position: relative; transition: .3s ease-in-out; } .card-details:before { content: ""; width: 190px; height: 380px; background: #f7f6f2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skew(-20deg, 0deg); z-index: -1; transition: .3s ease-in-out; } .card-details:hover:before{ background-color: #fffab3; } .card-icons { width: 140px; height: 150px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; } .card-icons:before { content: ""; position: absolute; top: 0; left: 0; border: 1px solid; width: 100%; height: 100%; transform: skew(-20deg, 0deg); background: #fff; border-color: #ffee02; transition: .3s ease-in-out; } .card-details:hover .card-icons:before{ background-color: #ffee02; } .card-icons img{ position: relative; width: 70px; height: 70px; } .card-details h3{ margin-bottom: 15px; margin-top: 50px; font-weight: 700; font-size: 1.75rem; line-height: 1.2; } .card-details h3 a{ color: #000; text-decoration: none; } .card-details p{ font-size: 16px; line-height: 30px; color: #444; font-weight: 400; margin-bottom: 30px; } .read-more-btn { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid; border-radius: 100%; margin: auto; background: #fff; transform: translateX(-10px); opacity: 0; visibility: hidden; border-color: #ffee02; transition: .3s ease-in-out; text-decoration: none; } .read-more-btn i{ color: #000; font-s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0