css布局黑色大气图文卡片列表布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局黑色大气图文卡片列表布局效果代码,4排显示,悬浮文字展开更多。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 公共样式表css */ html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } img { border: 0; } body { background: #fff; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } a:hover { color: #eee; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { } /* 必要布局样式css */ .case-content-bg{ padding-bottom: 0; height: 665px; background: black; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .case-content-info{ background-position: center 10%; padding: 80px 0; } .case-box{ width: 1180px; margin: 0 auto; position: relative; } .case-box-title{ text-align: center; color: #fff; font-weight:normal; padding-bottom:40px; } .case-box-title em{ display: block; margin-bottom: 14px; font-style: normal; font-size: 30px; font-weight: normal; } .case-box-title span{ font-size: 16px; opacity: .6; color: #fff; text-align: center; } .case-item{ cursor: pointer; width: 280px; height: 390px; float: left; display: block; margin: 20px 0 0 0; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-image: -webkit-linear-gradient(bottom, rgba(72, 72, 79, 0.3) 0%, #33333a 100%); background-image: -moz-linear-gradient(bottom, rgba(72, 72, 79, 0.3) 0%, #33333a 100%); background-image: -moz-linear-gradient(to top, rgba(72, 72, 79, 0.3) 0%, #33333a 100%); background-image: -o-linear-gradient(to top, rgba(72, 72, 79, 0.3) 0%, #33333a 100%); background-image: linear-gradient(to top, rgba(72, 72, 79, 0.3) 0%, #33333a 100%); background-repeat: repeat } .case-wrapper .case-item:hover { margin-top: 0; height: 430px } .case-item-bg1{ margin: auto; background: url(//repo.bfw.wiki/bfwrepo/icon/5d834e6d3b5e0.png) no-repeat center; background-size: contain; } .case-item-bg2{ margin: auto; background: url(//repo.bfw.wiki/bfwrepo/icon/5d834e7ee3796.png) no-repeat center; background-size: contain; } .case-item-bg3{ margin: auto; background: url(//repo.bfw.wiki/bfwrepo/icon/5d834ef53d5f1.png) no-repeat center; background-size: contain; } .case-item-bg4{ margin: auto; background: url(//repo.bfw.wiki/bfwrepo/icon/5d834e7ee3796.png) no-repeat center; background-size: contain; } .case-item-bg{ width: 100px; height: 100px; border-radius: 50px; margin-top: 50px; } .case-item-title{ font-size: 18px; color: #fff; text-align: center; margin: 20px 0; line-height: 40px; } .case-item-text{ font-size: 14px; color: #999999; line-height: 24px; height: calc(100% - 338px); margin: 0 30px; overflow: hidden; } .case-item-doc{ padding: 20px 30px; width: 280px; bottom: 0; position: absolute; background: #27272e; } .case-item-doc p{ line-height: 30px; margin: 0; font-size: 14px; color: #999999; } .case-item-doc p a{ font-size: 14px; color: #fff; float: left; width: calc(50% - 1px); } .case-item-doc a+a::befo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0