css布局实现卡片悬浮弹出边角效果代码-html代码-BFW代码库

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.min.css">
    <style>

        html {
            height: 100%;
        }
        body {
            background-color: #212121;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: wrap;
            margin: 0;
            height: 100%;
        }
    </style>

    <style>
        /* Icon set - http://ionicons.com */

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
        figure.snip1249 {
            font-family: 'Raleway', Arial, sans-serif;
            position: relative;
            overflow: hidden;
            margin: 10px;
            min-width: 220px;
            max-width: 310px;
            width: 100%;
            background: #1a1a1a;
            color: #ffffff;
            text-align: left;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
            background-image: linear-gradient(tobottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%).........完整代码请登录后点击上方下载按钮下载查看