vue实现手风琴图片悬浮缩放展示效果代码-html代码-BFW代码库

vue实现手风琴图片悬浮缩放展示效果代码

代码语言：html

所属分类：悬停

代码描述：vue实现手风琴图片悬浮缩放展示效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        @charset "utf-8";
    /* CSS Document */
    body{margin: 0;padding: 0;}
    ul{margin: 0;padding: 0; list-style: none;}
    a{text-decoration: none;}
    h3,p{margin: 0;font-weight: normal;}
    .main_box{
    	width: 100%;
    	position: relative;
    }
    .box{
    	width: 1232px;
    	margin: 10px auto;
    	padding: 15px;
    }
    .box_ul_li{
    	width: 202px;
    	height: 300px;
    	box-shadow: 3px 2px 30px rgba(0,0,0,.1);
    	float: left;
    	text-align: center;
    	position: relative;
    	transition: all .6s ease-out;
    }
    .box ul li h3{
    	padding-top: 30px;
    	color: #333;
    	font-size: 18px;
    }
    .box ul li p{
    	margin-top: 7px;
    	color: #666;
    	font-size: 14px;
    }
    .box ul li img{
    	width: 150px;
    	position: absolute;
    	right: 26px;
    	bottom: 40px;
    	transition: all .6s ease-out;
    }
    .box ul .on{
    	width: 402px;
    	height: 400px;
    	background-color: #6ab0e8;
    	text-align: left;
    }
    .box ul .on h3{
    	padding-left: 20px;
    	color: #FFF;
    }
    .box ul .on p{
    	margin-left: 20px;
    	color: #FFF;
    }
    .box ul .on img{
    	width: 382px;
        position: absolute;
        right: 8px;
        bottom: 10px;
        border: 2px #3e3d3d solid;
    }
    </style>

</head>

<body>

    <section class="main_box">
        <div class="box" id="app">
            <ul>
                <li :class="li.class" v-for="li in data">
                    <a :href="li.href" target="_blank">
                        <h3>{{li.name}}</h3>
                        <p>{{li.text}}</p>
                        <img :src="li.src" alt="img">
                    </a>
                </l.........完整代码请登录后点击上方下载按钮下载查看