jquery+css实现圣托里尼建筑背景效果代码-html代码-BFW代码库

jquery+css实现圣托里尼建筑背景效果代码

代码语言：html

所属分类：背景

代码描述：jquery+css实现圣托里尼建筑背景效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
        --cube-size: 100px;
        --color-white: #f5f8ea;
        --color-white-shadow-1: #96c6d9;
        --color-white-shadow-2: #e1eef2;
        --color-blue: #0d5299;
}

* {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
}

body {
        background-color: #eee;
        min-height: 100vh;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        background-color: var(--color-white-shadow-1);
}

#title {
        position: absolute;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
        pointer-events: none;
        border: 30px double var(--color-blue);
        color: var(--color-blue);
        text-shadow: 1px 1px 0 var(--color-white);
}

#title h2 {
        font-family: "Yellowtail", sans-serif;
        padding: 10px 20px 0;
        font-weight: 400;
        font-size: 30px;
        background-color: var(--color-white);
        margin-bottom: -6px;
        line-height: 1;
        z-index: 1;
        border: 6px solid var(--color-blue);
        border-bottom: 0;
}

#title h1 {
        font-size: 70px;
        font-family: "Josefin Sans", cursive;
        text-transform: uppercase;
        font-weight: 600;
        background-color: var(--color-white);
        padding: 20px 20px 0;
        border: 6px solid var(--color-blue);
        margin-bottom: 40px;
}

button {
        font-size: 16px;
        font-family: "Josefin Sans", cursive;
        text-transform: uppercase;
        font-weight: 700;
        padding: 10px 20px 6px;
        color: var(--color-blue);
        background-color: var(--color-white);
        border: 6px solid var(--color-blue);
        transition: all 0.2s;
        cursor: pointer;
}

button:hover {
        box-shadow: 6px 6px var(--color-blue);
}

#title button {
        pointer-events: all;
}

.wrapper {
        width: calc(var(--cube-size) * 1.4);
        height: 100vh;
        display: inline-block;
        position: relative;
        left: calc(var(--cube-size) * -0.75);
        top: calc(var(--cube-size) * -0.35);
}

.container {
        width: calc(var(--cube-size) * 1.4);
        height: calc(var(--cube-size) * 1.2);
        display: flex;
        justify-content: center;
        align-items: center;
        perspective-origin: top center;
        z-index: 1;
        animation: fadein 1s ease;
}

.container:hover {
        transform: rotateY(180deg);
}

@keyframes fadein {
        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}

.container:nth-child(even) {
        transform: translateX(25%);
}

.container:nth-child(odd) {
        transform: translateX(-25%);
}

.cube {
        z-index: 1;
        position: rela.........完整代码请登录后点击上方下载按钮下载查看