css实现边角卡片鼠标悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现边角卡片鼠标悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="Neat"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> body{ min-height: 100hv; background: #050822; line-height:20px; } *{ margin:0; padding:0; font-size: 12px; } ul{ list-style:none; } .hide{ display: none; } .lf{ float: left; } .lr{ float: right; } .red, .red a,.red a h5, .red a p{ color:#FF0000 !important; } a { text-decoration: none; color: inherit; } .mr2 { margin-right: 1rem; } .ml2 { margin-left: 1rem; } .main-group{ position: relative; width:1000px; height:100vh; align-items: center; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-rows: auto; grid-gap: 0 30px; margin: 0 auto; } .main-group .item-group{ position: relative; height:320px; display: flex; background: #07092e; justify-content: center; align-items: center; border: 1px solid #000; } .main-group .item-group:before{ content: ''; position: absolute; top:-2px; left: -2px; right: -2px; bottom: -2px; background: #fff; transform: skew(2deg,2deg); z-index: -1; } .main-group .item-group:nth-child(1):before{ background: linear-gradient(315deg, #ff0055, #da4112); } .main-group .item-group:nth-child(2):before{ background: linear-gradient(315deg, #06b36b, #19e63b); } .main-group .item-group:nth-child(3):before{ background: linear-gradient(315deg, #7108ad, #db1869); } .main-group .item-group:nth-child(4):before{ background: linear-gradient(315deg, #eecb04, #e62019); } .item-group .content{ position: relative; padding:20px; transform: translateY(26px); } .item-group .content h2{ position: absolute; top:50px; right: 10px; font-size: 14em; color: rgba(255,255,255, .06); transition: 0.5s; } .item-group:hover .content h2{ top:-10px; } .item-group .content .title{ margin-bottom:10px; font-size: 18px; font-weight: 500; color: #fff; } .item-group .content .desc{ color: #fff; } .item-group .content .button-group{ position: relative; margin-top:20px; padding:1px 20px; border: 1px solid #fff; display: inline-block; transition: 0.5s; transform: translateY(-40px); opacity: 0; visibility: hidden; color: #fff; font-size: 12px; } .item-group:hover .content .b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0