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

代码语言：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,0) 0%,#111111 100%);
    }
    h2 {
    	font-size:36px;
    	line-height:36px;
    	font-weight:700;
    	text-transform:uppercase;
    }
    @media only screen and (min-width:768px) {
    	h2 {
    	font-size:48px;
    	line-height:48px;
    }
    }@media only screen and (min-width:1280px) {
    	h2 {
    	font-size:64px;
    	line-height:64px;
    }
    }h3 {
    	font-weight:bold;
    	white-space:nowrap;
    	position:absolute;
    	z-index:30;
    	opacity:1;
    	top:50%;
    	left:50%;
    	transition:top 0.35s,opacity 0.15s;
    	transform-origin:0 0;
    	font-size:24px;
    	text-transform:uppercase;
    	transform:translate(-50%,-50%) rotate(0deg);
    }
    @media only screen and (min-width:1280px) {
    	h3 {
    	top:100%;
    	left:50%;
    	font-size:32px;
    	transform:translate(-20px,-50%) rotate(-90deg);
    }
    }.active h3 {
    	opacity:0;
    	top:200%;
    }
    .section-content {
    	position:relative;
    	z-index:30;
    	opacity:0;
    	align-self:flex-end;
    	width:100%;
    	transition:all 0.35s 0.1s ease-out;
    }
    .active .section-content {
    	opacity:1;
    }
    .section-content .inner {
    	position:absolute;
    	display:grid;
    	grid-auto-flow:row;
    	grid-template-columns:1fr;
    	grid-column-gap:20px;
    	align-items:flex-end;
    	left:0;
    	bottom:0;
    	padding:20px;
    	opacity:0;
    	transition:opacity 0.25s ease-out;
    }
    @media only screen and (min-width:768px) {
    	.section-content .inner {
    	grid-auto-flow:column;
    	grid-template-columns:calc(100% - 340px) 300px;
    	grid-column-gap:40px;
    	padding:40px;
    }
    }@media only screen and (min-width:1280px) {
    	.section-content .inner {
    	grid-auto-flow:column;
    	grid-template-columns:460px 200px;
    	grid-column-gap:40px;
    	padding:40px;
    }
    }.active .section-content .inner {
    	opacity:1;
    }
    .artist-profile-link {
    	pointer-events:none;
    }
    .active .artist-profile-link {
    	pointer-events:all;
    }
    </style>
</head>

<body>
    <div id="app">

        <ul>
            <li v-for="(artist, i) in artists" :style="`background-image: url(${artist.backgroundUrl});`" :class="active === i ? 'active' : ''" @click="()=>{active=i}">
                <h3>{{ artist.name }}</h3>
                <div class="section-content">
                    <div class="inner">
                        <div class="bio">
                            <h2>{{ artist.name }}</h2>
                            <p>
                                {{ artist.description }}
                            </p>

                            <a :href="artist.spotify.profileUrl" target="" class="artist-profile-link md:hidden">
                                <img src="//repo.bfw.wiki/bfwrepo/image/612248930fec0.png" alt="Listen on Spotify" width="64" height="64" loading="lazy" />
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
    <script>
        var Main =  
      {
.........完整代码请登录后点击上方下载按钮下载查看