css实现三维3d折叠面板打开iframe页面链接效果代码
代码语言：html
所属分类：布局界面
代码描述：css实现三维3d折叠面板打开iframe页面链接效果代码
代码标签： 3d 折叠 面板 打开 iframe 页面 链接 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script>
<style>
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #363558;
background-color: #1c1726;
}
a {
color: #544173;
text-decoration: none;
}
h1, h2 {
font-family: "Vollkorn", serif;
}
/* --------------------------------
Patterns - reusable parts of our design
-------------------------------- */
.overflow-hidden {
overflow: hidden;
}
/* --------------------------------
Header
-------------------------------- */
/*header {
height: 170px;
line-height: 170px;
text-align: center;
background: #ffffff;
}
header h1 {
font-size: 2.2rem;
color: #363558;
}
@media only screen and (min-width: 600px) {
header {
height: 200px;
line-height: 200px;
}
header h1 {
font-size: 3rem;
}
}*/
/* --------------------------------
Main content
-------------------------------- */
.cd-main {
overflow-x: hidden;
}
.cd-main::before {
/* never visible - this is used in jQuery to check the current MQ */
display: none;
content: 'mobile';
}
.cd-main > * {
-webkit-transition: -webkit-transform 0.5s 0.4s;
-moz-transition: -moz-transform 0.5s 0.4s;
transition: transform 0.5s 0.4s;
}
.cd-main.fold-is-open > * {
/* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s 0s;
-moz-transition: -moz-transform 0.5s 0s;
transition: transform 0.5s 0s;
}
@media only screen and (min-width: 600px) {
.cd-main.fold-is-open > * {
-webkit-transform: translateX(600px);
-moz-transform: translateX(600px);
-ms-transform: translateX(600px);
-o-transform: translateX(600px);
transform: translateX(600px);
}
}
@media only screen and (min-width: 1100px) {
.cd-main::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'desktop';
}
.cd-main.fold-is-open > * {
/* reset style - on bigger devices we translate the gallery items */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
.cd-gallery::after {
clear: both;
content: "";
display: table;
}
.cd-gallery::before {
/* this is the dark layer covering the .cd-gallery when the .cd-folding-panel is open */
display: block;
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(28, 23, 38, 0.6);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
-moz-transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
}
.fold-is-open .cd-gallery::before {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s 0s, visibility 0s 0s;
-moz-transition: opacity 0.5s 0s, visibility 0s 0s;
transition: opacity 0.5s 0s, visibility 0s 0s;
}
.cd-item {
width: 100%;
height: 300px;
text-align: center;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.5s 0.4s;
-moz-transition: -moz-transform 0.5s 0.4s;
transition: transform 0.5s 0.4s;
}
.cd-item > a {
display: table;
height: 100%;
width: 100%;
overflow: hidden;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-item > a.dark-text {
color: #363558;
}
.cd-item > a.dark-text b {
border-color: #363558;
}
.cd-item div {
display: table-cell;
vertical-align: middle;
}
.cd-item:nth-of-type(1) {
background-color: #363558;
}
.cd-item:nth-of-type(2) {
background-color: #544173;
}
.cd-item:nth-of-type(3) {
background-color: #dadcdc;
}
.cd-item:nth-of-type(4) {
background-color: #65d29b;
}
.cd-item h2 {
font-size: 2.2rem;
}
.cd-item p {
line-height: 1.2;
font-size: 1.4rem;
opacity: 0.6;
padding: 1em 0;
}
.cd-item b {
display: inline-block;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1em 1.3em;
border-radius: 50em;
border: 1px solid #ffffff;
}
@media only screen and (min-width: 1100px) {
.cd-item {
width: 50%;
float: left;
height: 520px;
-webkit-transition: -webkit-transform 0.5s 0.4s;
-moz-transition: -moz-transform 0.5s 0.4s;
transition: transform 0.5s 0.4s;
}
.cd-item h2 {
font-size: 3rem;
}
.cd-item p {
font-size: 1.6rem;
}
.cd-item h2, .cd-item p {
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: -webkit-transform 0.3s 0.1s;
-moz-transition: -moz-transform 0.3s 0.1s;
transition: transform 0.3s 0.1s;
}
.cd-item b {
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, transform 0.3s 0s;
}
.no-touch .cd-item a:hover h2, .no-touch .cd-item a:hover p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s;
transition: transform 0.3s 0s;
}
.no-touch .cd-item a:hover b {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.3s 0.1s, -webkit-transform 0.3s 0.1s;
-moz-transition: opacity 0.3s 0.1s, -moz-transform 0.3s 0.1s;
transition: opacity 0.3s 0.1s, transform 0.3s 0.1s;
}
.fold-is-open .cd-item {
-webkit-transition: -webkit-transform 0.5s 0s;
-moz-transition: -moz-transform 0.5s 0s;
transition: transform 0.5s 0s;
-webkit-transform: translateX(-400px);
-moz-transform: translateX(-400px);
-ms-transform: translateX(-400px);
-o-transform: translateX(-400px);
transform: translateX(-400px);
}
.fold-is-open .cd-item:nth-of-type(2n) {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-ms-transform: translateX(400px);
-o-transform: translateX(400px);
transform: translateX(400px);
}
}
/* --------------------------------
folding panel
-------------------------------- */
.cd-folding-panel {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 100vh;
width: 100%;
visibility: hidden;
overflow: hidden;
-webkit-transition: visibility 0s 0.9s;
-moz-transition: visibility 0s 0.9s;
transition: visibility 0s 0.9s;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
/* the :after elements of .fold-left and .fold-right are the 2 fold sides */
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
/* enable a 3D-space for children elements */
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
perspective: 2000px;
}
.cd-folding-panel .fold-left::after,
.cd-folding-panel .fold-right::after {
/* 2 fold sides */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.5s 0.4s, background-color 0.5s 0.4s;
-moz-transition: -moz-transform 0.5s 0.4s, background-color 0.5s 0.4s;
transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
}
.cd-folding-panel .fold-right {
-webkit-perspective-origin: 0% 50%;
-moz-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-right::after {
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
-webkit-transform: translateX(-100%) rotateY(-90deg);
-moz-transform: translateX(-100%) rotateY(-90deg);
-ms-transform: translateX(-100%) rotateY(-90deg);
-o-transform: translateX(-100%) rotateY(-90deg);
transform: translateX(-100%) rotateY(-90deg);
background-color: #c0c3c3;
}
.cd-folding-panel .fold-left {
/* on mobile only the right fold side is visible */
display: none;
}
.cd-folding-panel .fold-left::after {
background-color: #f9fafa;
}
.cd-folding-panel .cd-close {
/* 'X' close icon */
position: absolute;
z-index: 1;
display: inline-block;
top: 10px;
right: 10px;
height: 44px;
width: 44px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
opacity: 0;
-webkit-transition: opacity 0.2s 0s;
-moz-transition: opacity 0.2s 0s;
transition: opacity 0.2s 0s;
}
.cd-folding-panel .cd-close::after, .cd-folding-panel .cd-close::before {
/* lines of 'X' icon */
content: '';
position: absolute;
height: 3px;
width: 32px;
left: 50%;
top: 50%;
background-color: #544173;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.cd-folding-panel .cd-close::after {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cd-folding-panel .cd-close::before {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0