vue实现自适应横竖切换手风琴式图文幻灯片效果代码-html代码-BFW代码库

vue实现自适应横竖切换手风琴式图文幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：vue实现自适应横竖切换手风琴式图文幻灯片效果代码

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

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

    <style>
        body {
    	font-family:"Roboto Condensed",sans-serif;
    	color:#fff;
    	line-height:24px;
    	font-size:16px;
    }
    .bio {
    	display:grid;
    	grid-auto-flow:row;
    	grid-template-rows:min-content;
    	grid-gap:24px;
    }
    ul {
    	display:flex;
    	min-height:750px;
    	height:100vh;
    	margin:0;
    	padding:0;
    	overflow:hidden;
    	list-style-type:none;
    	width:100%;
    	min-width:100%;
    	flex-direction:column;
    }
    @media only screen and (min-width:1280px) {
    	ul {
    	flex-direction:row;
    }
    }li {
    	flex:1;
    	display:flex;
    	align-items:stretch;
    	cursor:pointer;
    	transition:all 0.35s ease;
    	cursor:pointer;
    	position:relative;
    	background-size:cover;
    	background-repeat:no-repeat;
    	background-position:top center;
    	overflow:hidden;
    }
    li:before {
    	content:"";
    	position:absolute;
    	z-index:20;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	background:rgba(15,15,15,0.75);
    }
    li.active {
    	flex:6;
    	cursor:default;
    }
    li.active:before {
    	background:linear-gradient(180deg,rgba(15,15,15,.........完整代码请登录后点击上方下载按钮下载查看