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/font-awesome-4.7.0/css/font-awesome.css">
<style>
.container {
height: 100vh;
width: 100vw;
justify-content: space-around;
align-items: center;
margin: 40px;
}
.border {
height: 369px;
width: 290px;
background: transparent;
border-radius: 10px;
transition: border 1s;
position: relative;
}
.border:hover {
border: 1px solid #fff;
}
.card {
height: 379px;
width: 300px;
background: #808080;
border-radius: 10px;
transition: background 0.8s;
overflow: hidden;
background: #000;
box-shadow: 0 70px 63px -60px #000;
display: flex;
justi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0