jquery实现一个三维女友照片盒子加樱花满天飞浪漫爱情动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：jquery实现一个三维女友照片盒子加樱花满天飞浪漫爱情动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @charset "utf-8";
    * {
      margin: 0;
      padding: 0;
    }
    body {
      max-width: 100%;
      min-width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
    }
    li {
      list-style: none;
    }
    .box {
      width: 200px;
      height: 200px;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
      position: absolute;
      margin-left: 42%;
      margin-top: 22%;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX(13deg);
      -webkit-animation: move 5s linear infinite;
    }
    .minbox {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50px;
      top: 30px;
      -webkit-transform-style: preserve-3d;
    }
    .minbox li {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .minbox li:nth-child(1) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: translateZ(50px);
    }
    .minbox li:nth-child(2) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateX(180deg) translateZ(50px);
    }
    .minbox li:nth-child(3) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateX(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(4) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }
    .minbox li:nth-child(5) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateY(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(6) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateY(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(1) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: translateZ(50px);
    }
    .maxbox li:nth-child(2) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90 no-repeat 0 0;
      -webkit-transform: translateZ(50px);
    }
    .maxbox li:nth-child(3) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateX(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(4) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(5) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateY(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(6) {
      background: url(//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90) no-repeat 0 0;
      -webkit-transform: rotateY(90deg) translateZ(50px);
    }
    .maxbox {
      width: 800px;
      height: 400px;
      position: absolute;
      left: 0;
      top: -20px;
      -webkit-transform-style: preserve-3d;
    }
    .maxbox li {
      width: 200px;
      height: 200px;
      background: #fff;
      border: 1px solid #ccc;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.2;
      -webkit-transition: all 1s ease;
    }
    .maxbox li:nth-child(1) {
      -webkit-transform: translateZ(100px);
    }
    .maxbox li:nth-child(2) {
      -webkit-transform: rotateX(180deg) translateZ(100px);
    }
    .maxbox li:nth-child(3) {
      -webkit-transform: rotateX(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(4) {
      -webkit-transform: rotateX(90deg) translateZ(100px);
    }
    .maxbox li:nth-child(5) {
      -webkit-transform: rotateY(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(6) {
      -webkit-transform: rotateY(90deg) translateZ(100px);
    }
    .box:hover ol li:nth-child(1) {
      -webkit-transform: translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    .box:hover ol li:nth-child(2) {
      -webkit-transform: rotateX(180deg) translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    .box:hover ol li:nth-child(3) {
      -webkit-transform: rotateX(-90deg) translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    .box:hover ol li:nth-child(4) {
      -webkit-transform: rotateX(90deg) translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    .box:hover ol li:nth-child(5) {
      -webkit-transform: rotateY(-90deg) translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    .box:hover ol li:nth-child(6) {
      -webkit-transform: rotateY(90deg) translateZ(300px);
      width: 400px;
      height: 400px;
      opacity: 0.8;
      left: -100px;
      top: -100px;
    }
    @keyframes move {
      0% {
        -webkit-transform: rotateX(13deg) rotateY(0deg);
      }
      100% {
        -webkit-transform: rotateX(13deg) rotateY(360deg);
      }
    }
    </style>
    <style.........完整代码请登录后点击上方下载按钮下载查看