主页

开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~

此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。

同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。

但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。

最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！

页面效果：星空是可动的哦~~~毒药水特效的颜色搭配，文字渐变的动态效果，图片360度旋转展示特效等等等；每一次的按钮点击都是满满的惊艳 ~ ~ ~

一：`caidan.html`

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="JS/adapter.js"></script>
  <link rel="stylesheet" href="CSS/base.css">
  <link rel="stylesheet" href="CSS/menu.css">
  <link rel="stylesheet" href="CSS/3D图片旋转.css">
  <title>111</title>

<!--导航栏-->
    <style>
      .caidan {
    
    
        height: 48px;
        background-color: rgba(20, 33, 125, 0.3);
      }

      .lj{
    
    
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .lop{
    
    
        width: 100px;
        height: 100%;
        list-style-type: none;
        position: relative;
        transform-style: preserve-3d;
        transition: all 0.6s;
      }


      .lop a{
    
    
        display: inline-block;
        text-decoration: underline;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 48px;
          font-family: "新宋体";
          font-size:20px;
          font-weight: bold;
          font-style: oblique;
           text-emphasis: '❤';

      color: transparent;
  background: linear-gradient(to right, #9437e5 0, #eeda25 20%, #e22626 40%);
  background-position: -32px 0;
  -webkit-background-clip: text;
  animation: eff71 3s linear infinite;
}
@keyframes eff71{
    
    
  to{
    
    
    background-position: 130px 0;
  }
}

      .en {
    
    
        width: 100%;
        height: 100%;
        outline: 1px solid rgba(0, 111, 170, 0.45);
        position: absolute;
        z-index: 2;
        transform: translateZ(24px);
      }

      .zh {
    
    
        width: 100%;
        height: 100%;
                background: linear-gradient(to bottom,green, greenyellow,lawngreen, lightgreen, mediumseagreen,deepskyblue,cadetblue);

        outline: 1px solid #00aa7f;
        color: #fff;
        position: absolute;
        z-index: 2;
        transform: translateY(24px) rotateX(-90deg);
      }

      .lop:hover {
    
    
        transform: rotateX(90deg);
      }

    </style>


</head>
<body>

<!--星空背景-->
<div>
    <canvas id="canvas"></canvas>
    <canvas id="snow"></canvas>
    <div class="am-g" style="position: fixed; bottom: 0px;">
        <div class="am-u-sm-12">
            <div style="z-index: 9999" id="player" class="aplayer">
            </div>
        </div>
    </div>
</div>


<style type="text/css">
    canvas {
    
    
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
</style>
<script type="text/javascript">
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1300;  
    var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');
    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();
    function random(min, max) {
    
    
        if (arguments.length < 2) {
    
    
            max = min;
            min = 0;
        }
        if (min > max) {
    
    
            var hold = max;
            max = min;
            min = hold;
        }
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function maxOrbit(x, y) {
    
    
        var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
    }
    var Star = function () {
    
    
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 8;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 50000;
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
    }
    Star.prototype.draw = function () {
    
    
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);
        if (twinkle === 1 && this.alpha > 0) {
    
    
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
    
    
            this.alpha += 0.05;
        }
        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }
    for (var i = 0; i < maxStars; i++) {
    
    
        new Star();
    }
    function animation() {
    
    
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h)
        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
    
    
            stars[i].draw();
            canvas2.style.cssText = "display:none";
        };
        window.requestAnimationFrame(animation);
    }
    animation();
</script>

<!--左侧隐藏栏-->
<div id="menu">
    <!--隐藏菜单-->
    <div id="ensconce">
        <h2>
            <img src="images/show.png" alt="">
            常温系统
        </h2>
    </div>

    <!--显示菜单-->
    <div id="open">
        <div class="navH">
             <p class="text71">常“温”</p >
            <span><img class="obscure" src="images/obscure.png" alt=""></span>
        </div>
        <div class="navBox">
            <ul>
                <li>
                    <h2 class="obtain">烟花予你<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">111<i></i></h2>
                    <div class="secondary">
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                        <h3><a>我爱你</a></h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--上方导航栏-->
    <nav class="caidan">
      <ul class="lj">
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
          <li class="lop">
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>

      </ul>
    </nav>
<script src="JS/menu.js"></script>

<div class="hei"></div>

<div id="drag-container">
  <div id="spin-container">
    <!-- 在这里添加图片或者mp4视频 -->
      <img id="tiaozhuan1" alt="">
    <img id="tiaozhuan2" alt="">
    <img id="tiaozhuan3" alt="">
    <img id="tiaozhuan4" alt="">
    <img id="tiaozhuan5" alt="">
    <img id="tiaozhuan6" alt="">
    <img id="tiaozhuan7" alt="">
    <img id="tiaozhuan8" alt="">
    <!-- 背景文字描述 -->
    <p>(❤ ω ❤)</p >

  </div>
  <div id="ground"></div>
</div>
<div id="music-container"></div>
<script  src="JS/script3.js"></script>
</body>
</html>

二：`CSS`文件包

（1）`base.css`

body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
   
   
    margin: 0;
    padding: 0;
}

body, html {
   
   
    font-size: 16px;
    font-family: "微软雅黑";
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.middle {
   
   
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

a {
   
   
    color: #3e3e3e;
    text-decoration: none;
}

img, input, button, textarea {
   
   
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

ul {
   
   
    list-style: none;
}

input {
   
   
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

img {
   
   
    border: 0;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
   
   
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em, u {
   
   
    font-style: normal;
    text-decoration: none;
}

.fl {
   
   
    float: left;
}

.fr {
   
   
    float: right;
}

.clearfix:before,
.clearfix:after {
   
   
    content: "";
    display: table;
}

.clearfix:after {
   
   
    clear: both;
}

.clearfix {
   
   
    *zoom: 1;
}

（2）`menu.css`

#menu {
   
   
  overflow: hidden;
  height: 100%;
  float: left;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#menu #ensconce {
   
   
  width: 0.35rem;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
  display: none;
  background-image: linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
}

#menu #ensconce h2 {
   
   
  cursor: pointer;
  color: #f7f9fa;
  font-size: 0.24rem;
   text-emphasis: '❤';
  line-height: 0.5rem;
  width: 100%;
  position: absolute;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(0%, -50%);
}


#menu #ensconce h2 img {
   
   
  width: 52%;
}
#menu #open {
   
   
  width: 2.6rem;
  height: 100%;
  background-color: rgba(34, 215, 73, 0.64);
  padding-bottom: 0.1rem;
  box-sizing: border-box;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
}
#menu #open .navH {
   
   
  height: 0.6rem;
  background: linear-gradient(to bottom,lawngreen, blue, indigo, violet);
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.2rem;
  color: #e8eff1;
  position: relative;
  box-sizing: border-box;
  font-family: "新宋体";
}


.text71{
   
   
  font-weight: 600;
  font-size: 18px;
  color: transparent;
  letter-spacing: 4px;
  margin: 0;
  padding: 0 16px;
  background: linear-gradient(to right, #e5ce37 0, #2dce7b 20%, #c40a0a 40%);
  background-position: -32px 0;
  -webkit-background-clip: text;
  animation: eff71 3s linear infinite;
}
@keyframes eff71{
   
   
  to{
   
   
    background-position: 130px 0;
  }
}


#menu #open .navH span {
   
   
  position: absolute;
  top: 49%;
  right: 0;
  padding: 0 0.15rem;
  cursor: pointer;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: inline-block;
}
#menu #open .navH span .obscure {
   
   
  width: 0.24rem;
}
#menu #open .navBox {
   
   
  height: 100%;
  overflow-y: auto;
  padding-left: 0.05rem;
  padding-right: 0.07rem;
  margin-top: 0.1rem;
   cursor: pointer;
  margin-bottom: 4px;
   background-image: linear-gradient(100deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad,#e5081b, #0a3cee, #561286, #cc3ff5,#8e44ad);
            background-size: 400%;
            animation: ty 5s infinite;
}
#menu #open .navBox ul li {
   
   
  cursor: pointer;
  margin-bottom: 4px;

  background-image: linear-gradient(45deg, rgba(227, 219, 220, 0.38), rgba(142, 153, 189, 0.51), rgba(83, 191, 210, 0.55), rgba(33, 165, 205, 0.42),#8e44ad);
            background-size: 100%;
            animation: ty 5s infinite;
}


 @keyframes ty {
   
   
            0%{
   
   
                background-position: 0% 50%;
            }
            50%{
   
   
                background-position: 100% 50%;
            }
            100%{
   
   
                background-position: 0% 50%;
            }
        }

#menu #open .navBox ul li .obtain {
   
   
    background-color: rgba(22, 40, 158, 0.29);
}
#menu #open .navBox ul li .obtain:hover {
   
   
     background: linear-gradient(to bottom,yellow,yellowgreen, greenyellow,darkgray,dimgray);
}

#menu #open .navBox ul li h2 {
   
   
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 0.15rem;
  padding: 0.15rem 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  color: transparent;
  background: linear-gradient(to right, #7f69e2 0, #9046e5 20%, #9c1dbf 40%);
  background-position: -32px 0;
  -webkit-background-clip: text;
  animation: eff 3s linear infinite;
}
@keyframes eff{
   
   
  to{
   
   
    background-position: 130px 0;
  }
}


#menu #open .navBox ul li h2 i {
   
   
  position: absolute;
  top: 50%;
  right: 0.15rem;
  border-top: 0.07rem transparent dashed;
  border-left: 0.07rem solid #fff;
  border-right: 0.07rem transparent dashed;
  border-bottom: 0.07rem transparent dashed;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.6s ease;
  -moz-transition: -moz-transform 0.6s ease;
  -o-transition: -o-transform 0.6s ease;
  -ms-transition: -ms-transform 0.6s ease;
  transform-origin: 4px 3px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#menu #open .navBox ul li h2 .arrowRot {
   
   
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#menu #open .navBox ul li .secondary {
   
   
  overflow: hidden;
  height: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
}

#menu #open .navBox ul li .secondary h3 {
   
   
  padding: 0.1rem 0;
  text-align: center;
  font-size: 0.13rem;
  background-color: rgba(123, 229, 158, 0.4);
  color: #e6f6e9;
  border-bottom: 0.8px solid #42495d;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
}


#menu #open .navBox ul li .secondary h3 a{
   
   
    background: linear-gradient(to right, #e5ce37 0, #2dce7b 20%, #c40a0a 40%);
  background-position: -32px 0;
  -webkit-background-clip: text;
  animation: eff71 1s linear infinite;
}
 @keyframes eff71{
   
   
  to{
   
   
    background-position: 130px 0;
  }
}

#menu #open .navBox ul li .secondary h3:hover {
   
   
  background: linear-gradient(to bottom, #ff0000, orange, yellow, rgba(49, 173, 49, 0.99), blue, indigo, violet);
}
#menu #open .navBox ul li .secondary .seconFocus {
   
   
  background-color: #be40e2;
  -webkit-box-shadow: 3px 3px 3px #aa8c51;
  -moz-box-shadow: 3px 3px 3px #aa8c51;
  box-shadow: 3px 3px 3px #aa8c51;
}

（3）`3D图片旋转.css`

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

.hei{
   
   
    height: 150px;
}
html,
body {
   
   
  touch-action: none;
    width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
}

#drag-container, #spin-container {
   
   
  position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
    width: 200px;
    align-items: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
          transform: rotateX(-10deg);
}

#drag-container img, #drag-container video {
   
   
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  -webkit-box-shadow: 0 0 8px #fff;
          box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover, #drag-container video:hover {
   
   
  -webkit-box-shadow: 0 0 15px #fffd;
          box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
   
   
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  color: #d41919;
}

#ground {
   
   
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}

@-webkit-keyframes spin {
   
   
  from{
   
   
    -webkit-transform: rotateY(10deg);
            transform: rotateY(0deg);
  } to{
   
   
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spin {
   
   
  from{
   
   
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
   
   
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes spinRevert {
   
   
  from{
   
   
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
   
   
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes spinRevert {
   
   
  from{
   
   
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
   
   
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

三：`JS文件包`

（1）`adapter.js`

var html = document.getElementsByTagName('html')[0];
var width = window.innerWidth;
if (width > 1080) {
   
   
    width = 1080;
}
else if (width < 320 ) {
   
   
    width = 320 ;
}
var fontSize = 100/1080*width;

html.style.fontSize = fontSize +'px';
window.onresize = function(){
   
   
    var html = document.getElementsByTagName('html')[0];
    var width = window.innerWidth;
    if (width > 1080) {
   
   
        width = 1080;
    }
    else if (width < 320 ) {
   
   
        width = 320 ;
    }
    var fontSize = 100/1080 * width;
    html.style.fontSize = fontSize +'px';
}

（2）`menu.js`

window.onload = function () {
   
   
    var flag = true;
    var liC = document.querySelectorAll(".navBox li h2");
    // 主导航nav点击事件
    for (var i = 0; i < liC.length; i++) {
   
   
        liC[i].onclick = function () {
   
   
            if (flag) {
   
   
                // 节流阀
                flag = false;
                setTimeout(function () {
   
   
                    flag = true;
                }, 500)
                // 自点
                if (this.className === "obFocus") {
   
   
                    this.querySelector("i").classList.remove("arrowRot");
                    getNext(this).style.height = "0";
                    this.classList.add("obtain");
                    this.classList.remove("obFocus");
                    return
                }

                var sec = getNext(this);
                var sib = siblings(sec.parentNode);
                var otherArr = [];
                var arrowClass = [];
                // 排他 secondary arrowRot obFocus
                for (var j = 0; j < sib.length; j++) {
   
   
                    var sibSec = sib[j].getElementsByTagName('*');
                    for (var i = 0; i < sibSec.length; i++) {
   
   
                        if (sibSec[i].className == "secondary") {
   
   
                            otherArr.push(sibSec[i])
                        }
                        if (sibSec[i].className == "arrowRot") {
   
   
                            arrowClass.push(sibSec[i])
                        }
                        if (sibSec[i].className == "obFocus") {
   
   
                            sibSec[i].classList.remove("obFocus");
                            sibSec[i].classList.add("obtain");

                        }
                    }
                }
                for (var i = 0; i < otherArr.length; i++) {
   
   
                    otherArr[i].style.height = "0";
                }
                if (arrowClass[0]) {
   
   
                    arrowClass[0].classList.remove("arrowRot");
                }

                // 留自己
                sec.style.height = 2.5078 + "rem";
                this.getElementsByTagName("i")[0].classList.add("arrowRot");
                this.classList.remove("obtain");
                this.classList.add("obFocus");
            }

        }
    }

    // 子导航点击事件
    var seconC = document.querySelectorAll(".secondary h3")
    for (var i = 0; i < seconC.length; i++) {
   
   
        seconC[i].onclick = function () {
   
   
            for (var i = 0; i < seconC.length; i++) {
   
   
                seconC[i].classList.remove("seconFocus");
            }
            this.classList.add("seconFocus");
        }
    }

    // 隐藏菜单
    var obscure = document.querySelector(".navH span");
    var open = document.querySelector("#open");
    var ensconce = document.querySelector("#ensconce");
    obscure.onclick = function () {
   
   
        open.style.marginLeft = "-300px";
        setTimeout(function () {
   
   
            ensconce.style.display = "block";
        }, 350)

    }
    //显示菜单
    var showC = document.querySelector("#ensconce h2");
    showC.onclick = function () {
   
   
        open.style.marginLeft = "0px";
        setTimeout(function () {
   
   
            ensconce.style.display = "none";
        }, 100)

    }
}

function getByClass(clsName, parent) {
   
   
    var oParent = parent ? document.getElementById(parent) : document,
        boxArr = new Array(),
        oElements = oParent.getElementsByTagName('*');
    for (var i = 0; i < oElements.length; i++) {
   
   
        if (oElements[i].className == clsName) {
   
   
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}
// 获取下一个兄弟元素
function getNext(node) {
   
   
    if (!node.nextSibling) return null;
    var nextNode = node.nextSibling;
    if (nextNode.nodeType == 1) {
   
   
        return nextNode;
    }
    return getNext(node.nextSibling);
}

// 获取除了自己以外的其他亲兄弟元素
function siblings(elem) {
   
   
    var r = [];
    var n = elem.parentNode.firstChild;
    for (; n; n = n.nextSibling) {
   
   
        if (n.nodeType === 1 && n !== elem) {
   
   
            r.push(n);
        }
    }
    return r;
}

（3）`script3.js`

// 全局参数定义
var radius = 280; // 相册的半径
var autoRotate = true; // 是否自动旋转
var rotateSpeed = -30; // 旋转速度
var imgWidth = 200; // 照片宽度 (unit: px)
var imgHeight = 250; // 照片高度 (unit: px)

setTimeout(init, 1000);
var odrag = document.getElementById('drag-container');
var ospin = document.getElementById('spin-container');
var aImg = ospin.getElementsByTagName('img');
var aVid = ospin.getElementsByTagName('video');
var aEle = [...aImg, ...aVid]; 

ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";

var ground = document.getElementById('ground');
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";

function init(delayTime) {
   
   
  for (var i = 0; i < aEle.length; i++) {
   
   
    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
    aEle[i].style.transition = "transform 1s";
    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
  }
}

function applyTranform(obj) {
   
   
  if(tY > 180) tY = 180;
  if(tY < 0) tY = 0;

  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
}

function playSpin(yes) {
   
   
  ospin.style.animationPlayState = (yes?'running':'paused');
}

var sX, sY, nX, nY, desX = 0,
    desY = 0,
    tX = 0,
    tY = 10;

if (autoRotate) {
   
   
  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
  ospin.style.animation = `${
     
     animationName} ${
     
     Math.abs(rotateSpeed)}s infinite linear`;
}

document.onpointerdown = function (e) {
   
   
  clearInterval(odrag.timer);
  e = e || window.event;
  var sX = e.clientX,
      sY = e.clientY;

  this.onpointermove = function (e) {
   
   
    e = e || window.event;
    var nX = e.clientX,
        nY = e.clientY;
    desX = nX - sX;
    desY = nY - sY;
    tX += desX * 0.1;
    tY += desY * 0.1;
    applyTranform(odrag);
    sX = nX;
    sY = nY;
  };

  this.onpointerup = function (e) {
   
   
    odrag.timer = setInterval(function () {
   
   
      desX *= 0.95;
      desY *= 0.95;
      tX += desX * 0.1;
      tY += desY * 0.1;
      applyTranform(odrag);
      playSpin(false);
      if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
   
   
        clearInterval(odrag.timer);
        playSpin(true);
      }
    }, 17);
    this.onpointermove = this.onpointerup = null;
  };

  return false;
};

document.onmousewheel = function(e) {
   
   
  e = e || window.event;
  var d = e.wheelDelta / 20 || -e.detail;
  radius += d;
  init(1);
};
document.getElementById('tiaozhuan1').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan2').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan3').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan4').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan5').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan6').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan7').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan8').addEventListener('click', function() {
   
   
    window.location.href = ''; // 替换为你想要跳转的URL
});

Web前端网站（二）- 主页

主页

一：`caidan.html`

二：`CSS`文件包

（1）`base.css`

（2）`menu.css`

（3）`3D图片旋转.css`

三：`JS文件包`

（1）`adapter.js`

（2）`menu.js`

（3）`script3.js`

四：`images包`

(1)`show.png`

(2)`obscure.png`

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Web前端网站（二）- 主页

主页

一：caidan.html

二：CSS文件包

（1）base.css

（2）menu.css

（3）3D图片旋转.css

三：JS文件包

（1）adapter.js

（2）menu.js

（3）script3.js

四：images包

(1)show.png

(2)obscure.png

热门文章

最新文章

相关课程

相关电子书

相关实验场景

一：`caidan.html`

二：`CSS`文件包

（1）`base.css`

（2）`menu.css`

（3）`3D图片旋转.css`

三：`JS文件包`

（1）`adapter.js`

（2）`menu.js`

（3）`script3.js`

四：`images包`

(1)`show.png`

(2)`obscure.png`