css实现十余种悬浮文字弹出动画效果代码-html代码-BFW代码库

css实现十余种悬浮文字弹出动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现十余种悬浮文字弹出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            background: #a9e4f7;
            background: linear-gradient(toright, #232526, #414345);
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            padding: 50px 0;
        }

        .row {
            margin: 0 auto;
            width: 80%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50px;
        }

        .row:last-child {
            margin-bottom: 0px;
        }

        .row .container {
            width: 48%;
            min-width: 450px;
            max-width: 650px;
            box-shadow: 0 0 0px 4px rgba(18, 18, 18, 0.47);
        }

        .container:hover {
            box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.47);
        }

        .row:nth-of-type(1) .container {
            width: 31%;
            min-width: 300px;
            max-width: 450px;
        }

        .row img {
            cursor: pointer;
            display: block;
            width: 100%;
        }

        .row .caption {
            cursor: pointer;
        }

        .row h2 {
            display: inline;
            background: rgba(51, 51, 51, 0.5);
            padding: 15px;
            letter-spacing: 2px;
            font-weight: 100;
            font-size: 22px;
            cursor: pointer;
        }

        .row p {
            display: inline;
            background: rgba(51, 51, 51, 0.7);
            padding: 10px;
            margin-top: 20px;
            font-weight: 100;
            font-size: 14px;
            cursor: pointer;
        }

@media only screen and (min-width: 1900px) {
            .row {
                width: 60%;
            }
        }

@media only screen and (max-width: 1200px) {
            .row {
                margin-top: 0;
                margin-bottom: 0;
                flex-direction: column;
            }

            .row .container {
                width: 60%;
                min-width: 650px;
                margin: 40px 0;
            }

            .row:nth-of-type(1) .container {
                width: 41%;
                min-width: 450px;
            }
        }

@media only screen and (max-width: 850px) {
            .row {
                margin-top: 0;
                margin-bottom: 0;
                flex-direction: column;
            }

            .container {
                margin: 210px 0;
            }

            .row .container {
                min-width: 450px;
            }

            .row:nth-of-type(1) .container {
                min-width: 350px;
            }

            .effect10 p {
                width: 80%;
            }

            .effect13 .caption p {
                margin-top: 30px;
            }

            .effect6 .caption h2 {
                font-size: 20px !important;
            }

            .effect6 .caption p {
                font-size: 12px !important;
            }
        }




        /*
    ===== Effect 1 =====
*/
        .effect1 {
            overflow: hidden;
            clip-path: circle(50% at 50% 50%);
            position: relative;
        }

        .effect1 img {
            position: relative;
        }

        /*Line*/
        .effect1 .caption:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 49%;
            width: 3px;
            height: 0;
            background-color: #fff;
            transition: top .5s, height .5s;
        }

        .effect1:hover .caption:before, .effect1:active .caption:before {
            top: 0;
            height: 100%;
        }

        /*Left & Right Side*/
        .effect1 .leftSide,
        .effect1 .rightSide {
            position: absolute;
            top: 0;
            left: -125%;
            width: 50%;
            height: 100%;
            background: linear-gradient(toright, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
            transition: left .7s;
        }

        .effect1 .rightSide {
            left: 125%;
            background: linear-gradient(toleft, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 100%);
        }

        .effect1:hover .leftSide,
        .effect1:active .leftSide {
            left: 0;
        }

        .effect1:hover .rightSide,
        .effect1:active .rightSide {
            left: 49%;
        }

        /* Text */
        .effect1 .leftInfo,
        .effect1 .rightInfo {
            opacity: 0;
            font-size: 30px;
            position: absolute;
            top: 50%;
            transition: opacity .6s, left .6s;
        }

        .effect1 .leftInfo {
            color: black;
            transform: translate(-100%, -50%);
            left: 0;
        }

        .effect1 .rightInfo {
            transform: translateY.........完整代码请登录后点击上方下载按钮下载查看