css+iframe实现卡片式切换标签页效果代码-html代码-BFW代码库

css+iframe实现卡片式切换标签页效果代码

代码语言：html

所属分类：幻灯片

代码描述：css+iframe模仿手机卡片式切换标签页效果代码，有点类似andriod与ios的app切换页面

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">

  
  
  
<style>
* {
  font-family: "Ubuntu", sans-serif;
}

body {
  padding: 0 20px;
  height: 100vh;
  background: #620979;
  background: linear-gradient(56deg, #620979 0%, #00fff6 100%);
  background-size: cover;
  background-repeat: none;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
body .viewer {
  width: 90%;
  height: 90vh;
  display: flex;
  justify-content: space-between;
  perspective: 3000px;
}
body .viewer iframe {
  width: 25vw;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #2b2b2b30;
  transition: 0.3s ease-in-out;
  z-index: 8000;
  transform: rotateY(20deg);
}
body .viewer iframe:not(:first-child).........完整代码请登录后点击上方下载按钮下载查看