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%);
        }
        figure.snip1249 * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
        }
        figure.snip1249 .image {
            position: relative;
        }
        figure.snip1249 img {
            max-width: 100%;
            vertical-align: top;
        }
        figure.snip1249 i {
            position: absolute;
            top: 7px;
            left: 12px;
            font-size: 32px;
            opacity: 0;
            z-index: 2;
            -webkit-transition-delay: 0;
            transition-delay: 0;
        }
        figure.snip1249 h3 {
            margin: 0;
            font-weight: 500;
            text-transform: uppercase;
        }
        figure.snip1249:before,
        figure.snip1249:after {
            width: 120px;
            height: 120px;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            z-index: 1;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
            background-image: linear-gradient(tobottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }
        figure.snip1249:before {
            background-color: #20638f;
            -webkit-transform: skew(-45deg) translateX(-150%);
            transform: skew(-45deg) translateX(-150%);
            border-right: 1px solid #20638f;
        }
        figure.snip1249:after {
            background-color: #962d22;
            -webkit-transform: skew(-45deg) translateX(-175%);
            transform: skew(-45deg) translateX(-175%);
            border-right: 1px solid #962d22;
        }
        figure.snip1249 figcaption {
            padding: 25px 80px 25px 25px;
            background-color: #ffffff;
            color: #000000;
            position: relative;
            font-size: 0.9em;
        }
        figure.snip1249 figcaption p {
            margin-bottom: 15px;
        }
        figure.snip1249 figcaption:before {
            width: 150px;
            height: 150px;
            position: absolute;
            bottom: 0;
            right: 0;
            content: '';
            z-index: 1;
            background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
            background-image: linear-gradient(tobottom, rgba(0, 0, 0, 0) 0%.........完整代码请登录后点击上方下载按钮下载查看