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

代码语言: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>
        html,
          body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          .container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #000000;
          }
    </style>
</head>

<body>
    <audio autoplay="autopaly">
      <source src="//repo.bfw.wiki/bfwrepo/sound/5e16a04d75540.mp3" type="audio/mp3" />
    </audio>
    <div id="jsi-cherry-container" class="container">
        <div class="box">
            <ul class="minbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ol class="maxbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

    <script>
        var RENDERER = {
            INIT_CHERRY_BLOSSOM_COUNT: 30,
            MAX_ADDING_INTERVAL: 10,
    
            init: function() {
              this.setParameters();
              this.reconstructMethods();
              this.createCherries();
              this.render();
              if (
                navigator.userAgent.match(
                  /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )
              ) {
                var box = document.querySelectorAll('.box')[0];
                console.log(box, '移动端');
                box.style.marginTop = '65%';
              }
            },
            setParameters: function() {
              this.$container = $('#jsi-cherry-container');
              this.width = this.$container.width();
              this.height = this.$container.height();
              this.context = $('<canvas />')
                .attr({ width: this.width, height: this.height })
                .appendTo(this.$container)
                .get(0)
                .getContext('2d');
              this.cherries = [];
              this.maxAddingInterval = Math.round(
                (this.MAX_ADDING_INTERVAL * 1000) / this.width
              );
              this.addingInterval = this.maxAddingInterval;
            },
            reconstructMethods: function() {
              this.render = this.render.bind(this);
            },
            createCherries: function() {
              for (
                var i = 0,
                  length = Math.round(
                    (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
                  );
                i < length;
                i++
              ) {
                this.cherries.push(new CHERRY_BLOSSOM(this, true));
              }
            },
            render: function() {
              requestAnimationFrame(this.rende.........完整代码请登录后点击上方下载按钮下载查看

网友评论5

  1. # 70
    怎么替换
    杨永强 2021-11-21回复
  2. # 68
    怎么添加图片和音乐
    等风 2021-11-04回复
    • 替换照片即可
      thinkfuture 2021-11-09回复
  3. # 67
    怎么添加照片
    等风 2021-11-04回复
  4. # 66
    怎么改照片
    等风 2021-11-04回复